JavaScript ArcGIS VectorTileLayer用法及代码示例

引用服务 URL 或样式 URL

要从服务创建 VectorTileLayer 实例，您必须将 url 属性设置为层的 REST 端点。为了使图层在视图中可见，必须将其添加到视图引用的Map中。有关向Map添加图层的信息，请参阅Map.add()。

require(["esri/layers/VectorTileLayer"], function(VectorTileLayer){
  // create a new instance of VectorTileLayer from the service endpoint
  const layer = new VectorTileLayer({
    // esri world vector tile service
    url: "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer"
  });
  map.add(layer);  // adds the layer to the map
});

要从样式 URL 创建 VectorTileLayer，您必须将 url 属性设置为图层的样式端点。

// create a new instance of VectorTileLayer from the vector tiles style endpoint
const layer = new VectorTileLayer({
  // esri colored pencil style
  url:
   "https://www.arcgis.com/sharing/rest/content/items/4cf7e1fb9f254dcda9c8fbadb15cf0f8/resources/styles/root.json"
});
map.add(layer);  // adds the layer to the map

引用 ArcGIS 门户项目 ID

如果 ArcGIS Online 或 ArcGIS Enterprise 中存在项目，您还可以根据其门户项目 ID 创建 VectorTileLayer。例如，以下代码片段显示如何使用 PortalItem 属性将新的 VectorTileLayer 实例添加到Map。

// points to the charted territory vector tile portal item in ArcGIS Online
// https://www.arcgis.com/home/item.html?id=1c365daf37a744fbad748b67aa69dac8
let layer = new VectorTileLayer({
 portalItem:{
   id: "1c365daf37a744fbad748b67aa69dac8"
 }
});
map.add(layer);  // adds the layer to the map

引用样式 JSON 对象

要从样式 JSON 对象创建 VectorTileLayer 实例，请将图层的样式属性设置为指向样式 JSON 对象。查看 VectorTileLayer from JSON 示例以了解其实际情况。

// create a new instance of VectorTileLayer from style JSON object
// by setting the layer's style property
const layer = new VectorTileLayer({
  style: {
    glyphs: "glyphsUrl/{fontstack}/{range}.pbf",
    version: 8,
    sprite: "spritesUrl/sprites/sprite",
    sources: {
      esri: {
        url: "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
        type: "vector"
      }
    },
    layers: [ ... ]
  }
});
map.add(layer);  // adds the layer to the map

替换整个样式

VectorTileLayer 的样式可以在图层初始化并添加到Map后整体替换。这可以通过调用该层的loadStyle()方法来完成。此方法将从样式 JSON 对象或样式 url 加载样式，并将替换图层的当前样式。此操作将重新加载整个图层。

// add a mid-century vector tile layer from its portal item
let layer = new VectorTileLayer({
 portalItem:{
   id: "7675d44bb1e4428aa2c30a9b68f97822"
 }
});
map.add(layer);  // adds the layer to the map

// replace the style of this layer to point to modern antique style
layer.loadStyle(
  "https://www.arcgis.com/sharing/rest/content/items/effe3475f05a4d608e66fd6eeb2113c0/resources/styles/root.json"
);

更新样式层的各种属性

VectorTileLayer初始化后，可以更改VectorTileLayer当前样式中style layers的属性。 VectorTileLayer 提供了许多辅助方法，允许您更新样式图层的属性，而无需重新加载图层。这只能在 2D MapView 中完成。

在 4.10 版本中，我们引入了 getLayoutProperties、getPaintProperties、setLayoutProperties 和 setPaintProperties。这些方法可以直接访问样式图层的 paint 和 layout 属性。查看 VectorTileLayer from JSON 示例以了解其实际情况。

// get layout properties of "Admin0 point/large" style layer
const layoutProperties = vtLayer.getLayoutProperties("Admin0 point/large");

// change the text-transform layout property to upper case
layoutProperties["text-transform"] = "uppercase";
layer.setLayoutProperties("Admin0 point/large", layoutProperties);

// get the paint properties for the marine area/1 layer
const paintProperties = vtLayer.getPaintProperties("Marine area");

// change the fill-color paint property for the layer.
paintProperties["fill-color"] = "#93CFC7";
layer.setPaintProperties("Marine area/1", paintProperties);

在版本 4.18 中，我们添加了以下辅助方法：getStyleLayer、setStyleLayer、deleteStyleLayer、getStyleLayerVisibility 和 setStyleLayerVisibility。 setStyleLayer 方法将允许您添加新的样式层或重新排序样式层。它还允许您重写或更改 style layer 的任何属性，包括 filter 、 source-layer 、 layout 和 paint 。 deleteStyleLayer 方法从样式中删除指定的样式层，setStyleLayerVisibility 方法切换样式层的可见性。查看 VectorTileLayer - update style layers 示例以了解其实际情况。

// change paint and layout properties of a style layer
const styleLayer = layer.getStyleLayer("City small scale/x large admin0 capital");
styleLayer.paint["text-color"] = "#E400E0";
styleLayer.paint["text-halo-color"] = "#E400E0";
styleLayer.layout["icon-size"] = 1.5;

// delete a style layer from the current style
layer.deleteStyleLayer("Marine areas");

// add a new style layer on top of the existing style
const styleLayer = { style layer json object}
layer.setStyleLayer(styleLayer, 0)