样式化要素图层

了解如何渲染要素图层。

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

在本教程中，分别使用三种不同的渲染器来渲染三个托管要素图层。

步骤

创建新 Pen

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

添加模块

1. 通过 require 引入FeatureLayer 模块。

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

   展开

   代码块使用深色

                                                                                                                                                                                     

   添加行。更改行

   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
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
       require([
         "geoscene/config",
         "geoscene/Map",
         "geoscene/views/MapView",
   
         "geoscene/layers/FeatureLayer"
   
       ], function(geosceneConfig, Map, MapView, FeatureLayer ) {
   

   展开

样式化点图层

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

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

   展开

   代码块使用深色

                                                                                                                                                                                     

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
         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"
           }
         }
   

   展开

2. 创建标注类 trailheadsLabels ，设置 symbol 属性，采用 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
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
         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"
           }
         };
   
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                                                                     

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
           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);
   

   展开

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

样式化线图层

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

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

   展开

   代码块使用深色

                                                                                                                                                                                     

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
         map.add(trailheads);
   
         // Define a unique value renderer and symbols
         const trailsRenderer = {
           type: "simple",
           symbol: {
             color: "#BA55D3",
             type: "simple-line",
             style: "solid"
           },
   
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                                                                     

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
         // 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"
             }
           ]
         };
   
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                                                                     

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
           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);
   

   展开

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

样式化自行车道

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

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

   展开

   代码块使用深色

                                                                                                                                                                                     

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
         // 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"
           }
         };
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                                                                     

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
         // 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);
   

   展开

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

样式化面图层

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

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

   展开

   代码块使用深色

                                                                                                                                                                                     

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
         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
           };
         }
   
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                                                                     

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
         // 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")
           ]
         };
   
   

   展开

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

   展开

   代码块使用深色

                                                                                                                                                                                     

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
         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);
   

   展开

运行应用程序

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

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

下一步是什么？

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

• 显示弹出窗口
• 显示 web 地图