样式化要素图层

如何渲染要素图层。

要素图层是托管要素服务中的数据集。每个要素图层包含具有单一几何类型 (点、线或面) 和属性组的要素。在客户端使用渲染器可以对要素图层进行样式化。绘制图层时，渲染器负责使用属性值将适当的符号赋予每个要素。渲染器还可以与可视化变量和表达式一起使用，以创建更复杂的数据驱动型可视化效果。

在本教程中，将使用三种不同的渲染器来设置三个托管要素图层的样式。

步骤

创建新 Pen

要开始使用，请完成显示地图教程或使用此 Pen。

添加模块

在 require 语句中，添加 FeatureLayer 模块。

GeoScene API for JavaScript 使用 AMD 模块。require 函数用于加载模块，以便它们可在主 function 中使用。保持模块引用和函数参数的顺序相同很重要。

Add line.Change line
<html>
<head>
  <meta name="description" content="DevLab: 样式化要素图层">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 样式化要素图层</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map, MapView, FeatureLayer ) {

      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });
    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

样式化点图层

通过 SimpleRenderer、PictureMarkerSymbol 和 LabelClass 类使用图片符号化点，并对点进行标注属性信息。

创建 trailheadsRenderer 并将其定义为 simple 渲染器。设置 symbol 属性以绘制从其 url 访问的徒步旅行者图像。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: 样式化要素图层">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 样式化要素图层</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map, MapView, FeatureLayer ) {
      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //经度、纬度
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://doc.geoscene.cn/resources/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }
    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建 trailheadsLabels 并设置 symbol 属性以使用 TRL_NAME 绘制标注。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: 样式化要素图层">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 样式化要素图层</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map, MapView, FeatureLayer ) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://doc.geoscene.cn/resources/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建 trailheads FeatureLayer。设置 url 属性以访问其 URL 端点。在将 trailheads 添加到 map 之前，请设置 renderer 和 labelingInfo。要素图层将自动转换 renderer 和 labelingInfo 以创建对象的类实例。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: 样式化要素图层">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 样式化要素图层</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map, MapView, FeatureLayer ) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.geoscene.cn/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // 创建图层并设置渲染器
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

使用名称查看徒步旅行者符号。

样式化线图层

使用 SimpleRenderer 和 VisualVariable 类样式化 Trails 要素图层中的小路。视觉变量可定义一个属性，该属性使用与高程变化较小的步道相比，具有较大变化的高程增益来样式化小道。

创建 trailsRenderer 并将其定义为 simple 渲染器。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: 样式化要素图层">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 样式化要素图层</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map, MapView, FeatureLayer ) {
      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.geoscene.cn/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        }      };
    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

在 visualVariables 数组中，将 field 设置为 ELEV_GAIN 以确定线宽。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: 样式化要素图层">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 样式化要素图层</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map, MapView, FeatureLayer ) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.geoscene.cn/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // 定义唯一值渲染器和符号
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };
    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建 trails FeatureLayer。设置 url 以访问其 URL 端点。在将 trails 添加到 map 之前，请设置 renderer 和 opacity 属性。要素图层将自动转换 renderer 以创建对象的类实例。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: 样式化要素图层">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 样式化要素图层</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map, MapView, FeatureLayer ) {

      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.geoscene.cn/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // 创建图层并设置渲染器
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // 添加图层
      map.add(trails,0);    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

根据高程增益查看不同宽度的小径。

显示线图层

可以使用渲染器和定义表达式来设置要素图层数据子集的样式。要基于 Trails 要素图层设置自行车专用小道的样式，请使用 definiteExpression、SimpleRenderer 和 SimpleLineSymbol 类。该图层将添加到现有小径图层的顶部。

创建 bikeTrailsRenderer 并将其定义为 simple 渲染器。设置 symbol 以绘制一条以粉色点进行样式化的线。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: 样式化要素图层">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 样式化要素图层</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map, MapView, FeatureLayer ) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.geoscene.cn/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // 添加图层
      map.add(trails,0);

      // 添加自行车专用道
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建 bikeTrails FeatureLayer 并设置 url 和 renderer 属性。在将 bikeTrails 添加到 map 之前，请设置 definiteExpression (SQL where 子句) 以从 Trails 要素图层访问自行车道。要素图层将自动转换 renderer 以创建对象的类实例

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: 样式化要素图层">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 样式化要素图层</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map, MapView, FeatureLayer ) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.geoscene.cn/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // 添加自行车专用道
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

查看自行车道相对于其他步道的位置。

样式化面图层

可以使用渲染器按唯一属性值设置要素图层数据的样式。使用 UniqueValueRenderer 和 SimpleFillSymbol 类可基于 Parks and Open Spaces 要素图层中的 TYPE 属性，使用不同的填充颜色设置面要素的样式。

使用 value 和 color 作为参数创建 createFillSymbol 函数。该函数将为每个公园类型返回 solid、simple-fill 符号。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: 样式化要素图层">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 样式化要素图层</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map, MapView, FeatureLayer ) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.geoscene.cn/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // 使用分类间隔渲染器和唯一值符号添加公园
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建 openSpacesRenderer 并将其定义为 unique-value。将 field 属性设置为 TYPE。在 uniqueValueInfos 数组中，为每个公园类型设置唯一颜色。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: 样式化要素图层">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 样式化要素图层</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map, MapView, FeatureLayer ) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.geoscene.cn/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // 使用分类间隔渲染器和唯一值符号添加公园
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // Create the layer and set the renderer
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // Add the layer
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建 openspaces FeatureLayer。设置 url 以访问其 URL 端点。在将 openspaces 添加到 map 之前，请设置 renderer 和 opacity 属性。要素图层将自动转换 renderer 以创建对象的类实例

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta name="description" content="DevLab: 样式化要素图层">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 样式化要素图层</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/config",
      "geoscene/Map",
      "geoscene/views/MapView",

      "geoscene/layers/FeatureLayer"

    ], function(geosceneConfig,Map, MapView, FeatureLayer ) {

      geosceneConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13
      });

      const trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.geoscene.cn/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      const trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "Noto Sans",
            style: "italic",
            weight: "normal"
          }
        },

        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

      // Create the layer and set the renderer
      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

      // Define a unique value renderer and symbols
      const trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },

        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // Create the layer and set the renderer
      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // Add the layer
      map.add(trails,0);

      // Add bikes only trails
      const bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

      const bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

      // Add parks with a class breaks renderer and unique symbols
      function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      const openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

      // 创建图层并设置渲染器
      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.2
      });

      // 添加图层
      map.add(openspaces,0);

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

运行应用程序

在 CodePen 中，运行代码以显示地图。

完成的结果是以唯一的数据驱动样式显示所有图层。

下一步是什么？

要了解如何使用其他 API 功能，请参阅以下教程：

上一主题添加要素图层下一主题显示弹出窗口

GeoScene API for JavaScript

样式化要素图层

解决方案

估计时间