Hinzufügen von Steuerelementen zu einer Karte

Artikel
11/12/2024

In diesem Artikel erfahren Sie, wie Sie einer Karte Steuerelemente hinzufügen, einschließlich der Erstellung einer Karte mit allen Steuerelementen und einer Stilauswahl.

Hinzufügen eines Zoomsteuerelements

Ein Zoomsteuerelement fügt Schaltflächen zum Vergrößern und Verkleinern der Karte hinzu. Das folgende Codebeispiel erstellt eine Instanz der Klasse ZoomControl und fügt sie in der rechten unteren Ecke der Karte hinzu.

//Construct a zoom control and add it to the map.
map.controls.add(new atlas.control.ZoomControl(), {
    position: 'bottom-right'
});

Hinzufügen eines Neigungssteuerelements

Ein Neigungssteuerelement fügt Schaltflächen zum Kippen der Neigung für eine Karte relativ zum Horizont hinzu. Im folgenden Codebeispiel wird eine Instanz der PitchControl-Klasse erstellt. Er fügt der oberen rechten Ecke der Karte das PitchControl-Steuerelement hinzu.

//Construct a pitch control and add it to the map.
map.controls.add(new atlas.control.PitchControl(), {
    position: 'top-right'
});

Hinzufügen eines Kompasssteuerelements

Ein Kompasssteuerelement fügt eine Schaltfläche zum Drehen der Karte hinzu. Das folgende Codebeispiel erstellt eine Instanz der Klasse Compass Control und fügt sie in der linken unteren Ecke der Karte hinzu.

//Construct a compass control and add it to the map.
map.controls.add(new atlas.control.CompassControl(), {
    position: 'bottom-left'
});

Hinzufügen eines Skalasteuerelements

Mithilfe eines Skalasteuerelements wird der Karte ein Skalabalken hinzugefügt. Das folgende Codebeispiel erstellt eine Instanz der Klasse ScaleControl und fügt sie in der linken unteren Ecke der Karte hinzu.

//Construct a scale control and add it to the map.
map.controls.add(new atlas.control.ScaleControl(), {
    position: 'bottom-left'
});

Hinzufügen eines Vollbildsteuerelements

Ein Vollbildsteuerelement fügt eine Schaltfläche hinzu, um die Karte oder das angegebene HTML-Element zwischen Vollbildansicht und Normalansicht umzuschalten. Das folgende Codebeispiel erstellt eine Instanz der Klasse FullscreenControl und fügt sie in der oberen rechten Ecke der Karte hinzu.

//Construct a fullscreen control and add it to the map.
map.controls.add(new atlas.control.FullscreenControl(), {
    position: 'top-right'
});

Eine Karte mit allen Steuerelementen

Mehrere Steuerelemente können in einem Array platziert, der Karte in einem Durchgang hinzugefügt und im gleichen Bereich der Karte positioniert werden, um die Entwicklung zu vereinfachen. Im folgenden Codeschnipsel werden der Karte bei diesem Ansatz die Standard-Navigationssteuerelemente hinzugefügt.

map.controls.add(
  [
    new atlas.control.ZoomControl(),
    new atlas.control.PitchControl(),
    new atlas.control.CompassControl(),
    new atlas.control.StyleControl(),
    new atlas.control.FullscreenControl(),
    new atlas.control.ScaleControl(),
  ],
  {
    position: 'top-right',
  }
);

Die folgende Abbildung zeigt eine Karte mit den Steuerelementen für Zoom-, Neigungs-, Kompass-, Stil-, Vollbild- und Skalaauswahl in der oberen rechten Ecke der Karte. Beachten Sie, wie sie automatisch gestapelt werden. Die Reihenfolge der Steuerelementobjekte im Skript bestimmt die Reihenfolge, in der sie auf der Karte angezeigt werden. Wenn Sie die Reihenfolge der Steuerelemente auf der Karte ändern möchten, ändern Sie ihre Reihenfolge im Array.

Das Stilauswahl-Steuerelement wird von der StyleControl-Klasse definiert. Weitere Informationen zum Verwenden des Stilauswahl-Steuerelements finden Sie unter Auswählen eines Kartenstils.

Anpassen von Steuerelementen

Das Beispiel Navigation Control Options (Optionen für Navigationssteuerelemente) ist ein Tool, mit dem die verschiedenen Optionen zum Anpassen der Steuerelemente getestet werden können. Den Quellcode für dieses Beispiel finden Sie unter Quellcode für Navigationssteuerungsoptionen.

Das Beispiel Fullscreen Control Options (Optionen für Vollbildsteuerelemente) ist ein Tool, mit dem die Optionen zum Anpassen des Steuerelements für den Vollbildmodus getestet werden können. Den Quellcode für dieses Beispiel finden Sie unter Quellcode für Optionen für das Vollbildsteuerelement.

Wenn Sie benutzerdefinierte Navigationssteuerelemente erstellen möchten, erstellen Sie eine Klasse, die sich von der atlas.Control-Klasse erstreckt, oder erstellen Sie ein HTML-Element und positionieren Sie es über der Kartenverteilung. Mit diesem UI-Steuerelement können Sie die setCamera-Funktion der Karte zum Verschieben der Karte aufrufen.