Español

Cómo: 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.
User-added image
  1. Copie la URL del estilo. A continuación se muestra un ejemplo de una URL de estilo:
User-added image
  1. 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);
        });
    
    
    
    });

Información relacionada