样式化要素图层

了解如何使用渲染器将数据驱动样式应用于要素图层。

要素图层是要素服务的数据集。要素图层的每个要素都具有相同的几何类型 (点、线或面) 和属性。在客户端使用渲染器可以对要素图层进行样式化。绘制图层时，渲染器负责按照属性值赋予每个要素相应的符号。渲染器还可与视觉变量和表达式一起使用，创建更复杂的数据驱动型可视化效果。 在本教程中，分别使用三种不同的渲染器来渲染三个托管要素图层。

步骤 ​

创建新 Pen ​

1. 在此之前，先了解显示地图教程 。

添加模块 ​

1. 通过 require 引入FeatureLayer 模块。

   更多内容

   GeoScene Maps SDK for JavaScript 提供了 AMD 模块和 ES 模块，本教程中我们是以 AMD 为例。AMD 使用require 函数加载模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持引用模块和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

   js

   require([
   "geoscene/config",
   "geoscene/Map",
   "geoscene/views/MapView",
   
   "geoscene/layers/FeatureLayer"
   
   ], function(geosceneConfig, Map, MapView, FeatureLayer ) {
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

样式化点图层 ​

该示例中我们采用简单渲染器 SimpleRenderer、图片标记符号 PictureMarkerSymbol 和 标注类 LabelClass 对点图层进行渲染。

1. 创建 simple 渲染器 trailheadsRenderer，设置其 symbol 属性，值为在线徒步旅行者图片的url 。

   js

   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"
       }
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   

2. 创建标注类 trailheadsLabels ，设置 symbol 属性，采用 TRL_NAME 字段标注。

   js

   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"
       }
   };

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   

3. 创建 trailheads FeatureLayer，设置 url 属性，设置 renderer 和 labelingInfo，将 trailheads 添加到 map。要素图层将自动转换 renderer 和 labelingInfo 以创建对象的类实例。

   js

       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);

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   

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

样式化线图层 ​

示例中我们使用简单渲染器 SimpleRenderer 和视觉变量 VisualVariable 渲染 徒步路线 要素图层中的小路。通过视觉变量线宽体现徒步路线的高程起伏对比情况，高程起伏大的要比高程起伏小的线宽。这是数据驱动可视化的一种形式。

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

   js

       map.add(trailheads);
   
       // Define a unique value renderer and symbols
       const trailsRenderer = {
           type: "simple",
           symbol: {
               color: "#BA55D3",
               type: "simple-line",
               style: "solid"
           },

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

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

   js

   // 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"
       }]
   };

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   

3. 创建 trails FeatureLayer，设置 url，设置 renderer 和 opacity 属性，将 trails 添加到 map 上。要素图层将自动转换 renderer 以创建对象的类实例。

   js

       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: 0.75
   });
   
   // Add the layer
   map.add(trails,0);

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   

4. 根据线宽来体现高程起伏。

样式化自行车道 ​

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

1. 创建简单渲染器 bikeTrailsRenderer，设置 symbol，一厘米宽的粉色点线。

   js

   // 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"
       }
   };

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   

2. 创建 bikeTrails FeatureLayer，设置 url 和 renderer 属性。另外设置 definitionExpression (SQL where 子句)，从徒步路线要素图层中筛选自行车道，然后将 bikeTrails 添加到 map。要素图层将自动转换 renderer 以创建对象的类实例。

   js

   // 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);

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   

3. 查看自行车道在徒步路线中的位置。

样式化面图层 ​

示例中我们按唯一值渲染要素图层数据。采用唯一值渲染器 UniqueValueRenderer 和简单符号 SimpleFillSymbol，基于公园和广场 要素图层中的 TYPE 属性，实现面要素渲染。

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

   js

   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
       };
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   

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

   js

   // 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")
       ]
   };

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   

3. 创建 openspaces FeatureLayer，设置 url ，设置 renderer 和 opacity 属性，将 openspaces 添加到 map 。要素图层将自动转换 renderer 以创建对象的类实例。

   js

   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);

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   

运行应用程序 ​

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

结果地图应以唯一的数据驱动样式显示所有图层。

下一步是什么？ ​

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

• 显示弹出窗口

• 显示 web 地图