操作方法：使用 ArcGIS API for JavaScript 更改矢量底图的样式

摘要

使用矢量底图的优点之一是底图的样式（如颜色）可使用 ArcGIS API for JavaScript 进行自定义。

过程

可以通过获取样式 URL 并将其应用于代码来更改矢量底图的样式。

1. 获取样式 URL。 要使用 ArcGIS Online 帐户中现有矢量底图的样式，请按以下说明进行操作：
   1. 登录 ArcGIS Online 帐户，打开所需矢量底图的“项目详细信息”页面。
   2. 在查看样式选项中查看矢量底图的样式 URL。

3. 复制样式 URL。 以下是样式 URL 的示例：

• 要使用带有默认样式的 Esri 世界底图矢量切片服务以及其他预定义样式，请参阅以下文档：ArcGIS API for JavaScript：VectorTileLayer 。
• 要自定义上述矢量底图样式的变量，请修改 root.json 文件，然后创建一个 Web URL。 有关构建 root.json 文件的更多规格，请参阅以下文档：Mapbox：Mapbox 样式规格和 GitHub：矢量切片规格。

2. 在 ArcGIS API for JavaScript 中通过以下脚本应用样式 URL。

   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"
   });
   
   //自定义矢量底图时，将 URL 更改为自定义 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);
   });
   
   
   
   });