Cambiar el estilo de un mapa base vectorial con ArcGIS API for JavaScript

Resumen

Una de las ventajas de utilizar mapas base vectoriales es que el estilo de los mapas base, por ejemplo, el color, se puede personalizar con ArcGIS API for JavaScript.

Procedimiento

El estilo de los mapas base vectoriales se puede modificar al obtener la URL del estilo y aplicarla al código.

1. Obtenga la URL del estilo. Para usar el estilo de un mapa base vectorial existente desde una cuenta de ArcGIS Online, siga estas instrucciones:
   1. Inicie sesión en una cuenta de ArcGIS Online y abra la página Detalles del elemento del mapa base vectorial deseado.
   2. Vea la URL del estilo del mapa base vectorial desde la opción Ver estilo.

3. Copie la URL del estilo. A continuación se muestra un ejemplo de una URL de estilo:

• Para usar el servicio de teselas vectoriales World Basemap de Esri con estilo predeterminado y ver otros estilos predefinidos, consulte el siguiente documento: ArcGIS API for JavaScript: VectorTileLayer.
• Para personalizar las variables de los estilos de mapa base vectoriales mencionados anteriormente, modifique el archivo root.json y cree una URL web. Para obtener información más detallada sobre cómo se compila el archivo root.json, consulte los siguientes documentos: Mapbox: Especificación de estilo de Mapbox y GitHub: Especificación para teselas vectoriales.

2. Aplique la URL del estilo utilizando el siguiente script en ArcGIS API for JavaScript.

   require(["esri/map",
       "esri/layers/FeatureLayer",
       "esri/layers/VectorTileLayer",
       "dojo/domReady!"
   ], function (Map, FeatureLayer, VectorTileLayer) {
   
       //Inicializando el constructor de mapa
       var map = new Map("map", {
           center: [-118, 34.5],
           zoom: 8,
           //basemap: "topo"
       });
   
      //Cuando personalice un mapa base vectorial, cambie la URL a la URL personalizada.
     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);
       });
   
   
   
   });