Ändern des Style einer Vektorgrundkarte mit ArcGIS API for JavaScript

Zusammenfassung

Vektorgrundkarten bieten u. a. den Vorteil, dass der Style der Grundkarten, z. B. die Farbe, mit ArcGIS API for JavaScript angepasst werden kann.

Vorgehensweise

Zum Ändern des Style von Vektorgrundkarten wird die Style-URL abgerufen und im Code angewendet.

1. Rufen Sie die Style-URL ab. Befolgen Sie die nachstehenden Anweisungen, um den Style einer vorhandenen Vektorgrundkarte aus einem ArcGIS Online-Konto zu verwenden:
   1. Melden Sie sich bei einem ArcGIS Online-Konto an, und öffnen Sie die Seite "Elementdetails" der gewünschten Vektorgrundkarte.
   2. Zeigen Sie mit der Option Style anzeigen die Style-URL der Vektorgrundkarte an.

3. Kopieren Sie die Style-URL. In der folgenden Abbildung wird ein Beispiel für eine Style-URL gezeigt:

• Informationen zum Verwenden des World Basemap-Vektorkachel-Service von Esri mit Standard-Styling und für andere vordefinierte Styles finden Sie im folgenden Dokument: ArcGIS API for JavaScript: VectorTileLayer.
• Um die Variablen der oben genannten Vektorgrundkarten-Styles anzupassen, ändern Sie die Datei "root.json", und erstellen Sie eine Web-URL. Weitere Informationen zum Erstellen der Datei "root.json" finden Sie in den folgenden Dokumenten: Mapbox: Mapbox Style Specification und GitHub: Vector Tile Specification.

2. Wenden Sie die Style-URL mit dem folgenden Skript in ArcGIS API for JavaScript an.

   require(["esri/map",
       "esri/layers/FeatureLayer",
       "esri/layers/VectorTileLayer",
       "dojo/domReady!"
   ], function (Map, FeatureLayer, VectorTileLayer) {
   
       //Initializing the map constructor
       var map = new Map("map", {
           center: [-118, 34.5],
           zoom: 8,
           //basemap: "topo"
       });
   
      //Ändern Sie beim Anpassen einer Vektorgrundkarte die URL in die angepasste URL
     var darkGrayStyleURL = "https://www.arcgis.com/sharing/rest/content/items/57436c01bc754dbb87dfb636b6484022/resources/styles/root.json";
     var lightGrayStyleURL = "https://www.arcgis.com/sharing/rest/content/items/1e47168d181248e491541ffd5a91c0de/resources/styles/root.json"
   
       let vectormap = new VectorTileLayer("https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer");
       vectormap.setStyle(lightGrayStyleURL);
       vectormap.on("load", () => {
           map.addLayer(vectormap);
       });
   
   
   
   });