样式化要素图层

了解如何渲染要素图层。

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

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

步骤

创建新 Pen

1. 要开始使用，请完成显示地图教程 或 使用此 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. 创建 trailheadsRenderer 并将其定义为 simple 渲染器。设置 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], //Longitude, latitude
           zoom: 13
         });
   
         const trailheadsRenderer = {
           "type": "simple",
           "symbol": {
             "type": "picture-marker",
             "url": "http://static.arcgis.com/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://static.arcgis.com/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 属性以访问其 URL 端点。在将 trailheads 添加到 map 之前，请设置 renderer 和 labelingInfo。要素图层将自动转换 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 类样式化 Trails 要素图层中的小路。视觉变量可定义一个属性，该属性使用与高程变化较小的步道相比，具有较大变化的高程增益来样式化小道。这是数据驱动可视化的一种形式。

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 以访问其 URL 端点。在将 trails 添加到 map 之前，请设置 renderer 和 opacity 属性。要素图层将自动转换 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: .75
         });
   
         // Add the layer
         map.add(trails,0);
    

   展开

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

显示线图层

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

1. 创建 bikeTrailsRenderer 并将其定义为 simple 渲染器。设置 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 属性。设置 definiteExpression (SQL where 子句) 以从 Trails 要素图层访问自行车道后，才能将 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 类可基于 Parks and Open Spaces 要素图层中的 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")
           ]
         };
   
    

   展开

1. 创建 openspaces FeatureLayer。设置 url 以访问其 URL 端点。在将 openspaces 添加到 map 之前，请设置 renderer 和 opacity 属性。要素图层将自动转换 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 功能，请参阅以下教程：

• 显示弹出窗口
• 添加要素图层