Ändern des Kartenstils

Das Kartensteuerelement unterstützt verschiedene Stiloptionen und Basiskartenstile für Karten. Alle Stile können festgelegt werden, wenn das Kartensteuerelement initialisiert wird. Alternativ können Sie auch Stile festlegen, indem Sie die setStyle-Funktion des Kartensteuerelements verwenden. In diesem Artikel erfahren Sie, wie Sie diese Stiloptionen verwenden können, um das Aussehen der Karte anzupassen, und wie Sie das Steuerelement für die Stilauswahl in Ihre Karte implementieren. Das Stilauswahl-Steuerelement ermöglicht dem Benutzer das Umschalten zwischen verschiedenen Basisstilen.

Festlegen von Kartenstiloptionen

Stiloptionen können während der Initialisierung des Websteuerelements festgelegt werden. Alternativ können Sie auch Stiloptionen aktualisieren, indem Sie die setStyle-Funktion des Kartensteuerelements aufrufen. Alle verfügbaren Stiloptionen können Sie unter Stiloptionen anzeigen.

//Set the style options when creating the map.
var map = new atlas.Map('map', {
    renderWorldCopies: false,
    showLogo: true,
    showFeedbackLink: true,
    style: 'road'

    //Additional map options.
});

//Update the style options at anytime using `setStyle` function.
map.setStyle({
    renderWorldCopies: true,
    showLogo: false,
    showFeedbackLink: false
});

Festlegen eines Kartenbasisstils

Sie können das Kartensteuerelement auch mit einem der Basiskartenstile initialisieren, die im Web SDK verfügbar sind. Sie können die setStyle-Funktion verwenden, um den Basisstil mit einem anderen Kartenstil zu aktualisieren.

Festlegen eines Kartenbasisstils bei der Initialisierung

Basisstile des Kartensteuerelements können während der Initialisierung festgelegt werden. Im folgenden Code wird die Option style des Kartensteuerelements auf den Kartenbasisstil grayscale_dark festgelegt.

var map = new atlas.Map('map', {
    style: 'grayscale_dark',

    //Additional map options
});

Aktualisieren des grundlegenden Kartenstils

Der Kartenbasisstil kann mithilfe der setStyle-Funktion und durch Festlegen der style-Option aktualisiert werden, um entweder zu einem anderen Kartenbasisstil zu wechseln oder um weitere Stiloptionen hinzuzufügen.

Im folgenden Code wird, nachdem eine Karteninstanz geladen wurde, der Kartenstil mithilfe der Funktion setStyle von grayscale_dark auf satellite aktualisiert.

map.setStyle({ style: 'satellite' });

Anpassung der Basiskarte

Die styleOverrides-Optionen ermöglichen es den Nutzern, die Basiskarte zu straffen, indem sie bestimmte Kartenelemente wie Land-/Regionsgrenzen, Verwaltungsbezirksgrenzen, Gebäudegrundflächen und Straßendetailebenen deaktivieren. Dies ermöglicht eine übersichtlichere und einfachere Kartenansicht und erleichtert die Visualisierung von Geometriedaten.

Der folgende Code zeigt, wie man Länder- und Regionsgrenzen sowie Gebäudeflächen auf der Karte deaktivieren kann.

var map = new atlas.Map('map', {
    styleOverrides: {
        countryRegion: { borderVisible: false },
        buildingFootprint: { visible: false },
    },

    //Additional map options
});

Hier sind Beispiele aller fünf verfügbaren styleOverrides Optionen:

• Landes- und Regionsgrenzen

styleOverrides: {
    countryRegion: { borderVisible: false }
}

• Verwaltungsbezirksgrenzen

styleOverrides: {
    adminDistrict: { borderVisible: false }
}

• Grenzen des zweiten Verwaltungsbezirks

styleOverrides: {
    adminDistrict2: { borderVisible: false }
}

• Gebäudegrundrisse

styleOverrides: {
    buildingFootprint: { visible: false }
}

• Straßendetails

styleOverrides: {
    roadDetails: { visible: false }
}

Für ein Beispiel, das die verschiedenen Stile zeigt und wie sie die Darstellung der Karte beeinflussen, siehe Kartenstil-Optionen in den Azure Maps Beispielen. Für den Quellcode dieses Beispiels siehe Quellcode für Kartenstiloptionen.

Steuerelement für die Stilauswahl hinzufügen

Das Stilauswahl-Steuerelement bietet eine einfach zu bedienende Schaltfläche mit Flyoutmenü, mit der Endbenutzer zwischen Basisstilen wechseln können.

Die Stilauswahl weist zwei verschiedene Layoutoptionen auf: icon und list. Außerdem gestattet Ihnen die Stilauswahl, zwei unterschiedliche style-Optionen für das Stilauswahl-Steuerelement auszuwählen: light und dark. In diesem Beispiel verwendet die Stilauswahl das icon-Layout und zeigt eine Auswahlliste der Kartenbasisstile in Form von Symbolen an. Das Stilauswahl-Steuerelement umfasst den folgenden Basissatz an Stilen: ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]. Weitere Informationen zu den Optionen des Stilauswahl-Steuerelements finden Sie unter Stilsteuerelement-Optionen.

Die folgende Abbildung zeigt das Steuerelement für die Stilauswahl, das im icon-Layout angezeigt wird.

Die folgende Abbildung zeigt das Steuerelement für die Stilauswahl, das im list-Layout angezeigt wird.

Im folgenden Code wird gezeigt, wie Sie die standardmäßige Liste der Basisstile mapStyles außer Kraft setzen können. In diesem Beispiel legen wir die Option mapStyles fest, um die Basisstile aufzulisten, die im Steuerelement für die Stilauswahl angezeigt werden sollen.

/*Add the Style Control to the map*/
map.controls.add(new atlas.control.StyleControl({
  mapStyles: ['road', 'grayscale_dark', 'night', 'road_shaded_relief', 'satellite', 'satellite_road_labels'],
  layout: 'list'
}), {
  position: 'top-right'
});  

Nächste Schritte

Weitere Informationen zu den in diesem Artikel verwendeten Klassen und Methoden:

In den folgenden Artikeln finden Sie weitere Codebeispiele, die Sie Ihren Karten hinzufügen können: