VectorTileLayer - 更新样式图层

尝试一下在线预览

这个例子展示了如何通过设置图层的样式属性来从 JSON style object 中添加 VectorTileLayer 。简化了 Esri 的世纪中叶矢量切片样式，并从修改后的 JSON 对象添加了 VectorTileLayer。Esri 还提供了一组具有不同样式的矢量基图。

它还演示了如何在运行时更改 2D MapView 中 VectorTileLayer 的 currentStyleInfo.style 中指定样式图层的布局和绘制属性，而无需重新加载整个 VectorTileLayer 。这可以通过使用 setStyleLayer() 和 setPaintProperties() 方法来完成。

GeoScene 矢量切片样式编辑器GeoScene 矢量切片样式编辑器是用来设计自定义矢量基图的，它利用了上面提到的方法。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>VectorTileLayer - update style layers | Sample | GeoScene API for JavaScript 4.22</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #topbar {
        padding: 10px;
      }

      .action-button {
        font-size: 14px;
        height: 32px;
        margin-top: 10px;
        border: 1px solid #0079c1;
        color: #0079c1;
      }

      .action-button:hover {
        background: #0079c1;
        color: #e4e4e4;
      }
    </style>
    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>
      require([
        "geoscene/Map",
        "geoscene/views/MapView",
        "geoscene/layers/VectorTileLayer"
      ], (Map, MapView, VectorTileLayer) => {
        const map = new Map();

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [38.5795, 39.8282],
          zoom: 2
        });


        // change the font case for the countries(Admin0 point/large) labels layer
        document.getElementById("layoutButton").addEventListener("click", () => {
          // get the layout properties for the Admin0 point/large layer
          const styleLayer = vtLayer.getStyleLayer("Admin0 point/large");

          // change the text-transform layout property
          styleLayer.layout["text-transform"] = styleLayer.layout["text-transform"] == "uppercase" ? "none" : "uppercase";
          vtLayer.setStyleLayer(styleLayer);
        });

        // change the fill-color for the water(Marine area/1) layer
        document.getElementById("paintButton").addEventListener("click", () => {
          // get the paint properties for the marine area/1 layer
          const paintProperties = vtLayer.getPaintProperties("Marine area/1");

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


        // load a new vector tile layer from JSON object
        const vtLayer = new VectorTileLayer({
          style: {
            layers: [
              {
                layout: {},
                paint: {
                  "fill-color": "#F0ECDB"
                },
                source: "esri",
                minzoom: 0,
                "source-layer": "Land",
                type: "fill",
                id: "Land/0"
              },
              {
                layout: {},
                paint: {
                  "fill-pattern": "Landpattern",
                  "fill-opacity": 0.25
                },
                source: "esri",
                minzoom: 0,
                "source-layer": "Land",
                type: "fill",
                id: "Land/1"
              },
              {
                layout: {},
                paint: {
                  "fill-color": "#93CFC7"
                },
                source: "esri",
                minzoom: 0,
                "source-layer": "Marine area",
                type: "fill",
                id: "Marine area/1"
              },
              {
                layout: {},
                paint: {
                  "fill-pattern": "Marine area",
                  "fill-opacity": 0.08
                },
                source: "esri",
                "source-layer": "Marine area",
                type: "fill",
                id: "Marine area/2"
              },
              {
                layout: {
                  "line-cap": "round",
                  "line-join": "round"
                },
                paint: {
                  "line-color": "#cccccc",
                  "line-dasharray": [7, 5.33333],
                  "line-width": 1
                },
                source: "esri",
                minzoom: 1,
                "source-layer": "Boundary line",
                type: "line",
                id: "Boundary line/Admin0/0"
              },
              {
                layout: {
                  "text-font": ["Risque Regular"],
                  "text-anchor": "center",
                  "text-field": "{_name_global}"
                },
                paint: {
                  "text-halo-blur": 1,
                  "text-color": "#AF420A",
                  "text-halo-width": 1,
                  "text-halo-color": "#f0efec"
                },
                source: "esri",
                "source-layer": "Continent",
                type: "symbol",
                id: "Continent"
              },
              {
                layout: {
                  "text-font": ["Atomic Age Regular"],
                  "text-field": "{_name}",
                  "text-transform": "none"
                },
                paint: {
                  "text-halo-blur": 1,
                  "text-color": "#AF420A",
                  "text-halo-width": 1,
                  "text-halo-color": "#f0efec"
                },
                source: "esri",
                minzoom: 2,
                "source-layer": "Admin0 point",
                maxzoom: 10,
                type: "symbol",
                id: "Admin0 point/large"
              }
            ],
            glyphs:
              "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf",
            version: 8,
            sprite:
              "http://www.geosceneonline.cn/geoscene/sharing/rest/content/items/7675d44bb1e4428aa2c30a9b68f97822/resources/sprites/sprite",
            sources: {
              geoscene: {
                url:
                  "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
                type: "vector"
              }
            }
          }
        });
        map.add(vtLayer);

        view.ui.add("topbar", "top-right");
      });
    </script>
  </head>

  <body>
    <div id="viewDiv">
      <div id="topbar" class="geoscene-widget">
        <button
          class="action-button"
          id="layoutButton"
          type="button"
          title="Change font case for countries"
        >
          Change font case
        </button>
        <button
          class="action-button"
          id="paintButton"
          type="button"
          title="Change water fill color"
        >
          Change water color
        </button>
      </div>
    </div>
  </body>
</html>

MapView

VectorTileLayer

json

GeoScene API for JavaScript示例中心

VectorTileLayer - 更新样式图层