分级渲染

使用分级渲染表示人口普查区,以显示了高中教育水平

什么是分级渲染样式?

分级渲染将数据分为几个级别展示。它将有意义的数字定义为两个或多个范围,用唯一的符号表示每个范围。可以使用此样式来表示有多少类或者多少种。

虽然不同分级的符号不同,但在这些符号主要针对属性的某一个表示类型不同,其他表示方法是相同的,比如可以按颜色分级、比例、大小等。

对于百分比、速率、比率和其他标准化数据,分类间隔是不错的选择,因为要素的面积、长度或大小是无关紧要的。 通过基于要素在值范围中的关系对所有要素着色,这可以对要素进行直接的视觉比较。当要素的面积、长度或大小变化不大时,此方法最为有效。

分类间隔样式的工作方式

此样式是使用ClassBreaksRenderer类设置。使用这种渲染方式有以下要求:

  1. 指定一个字段名或 Arcade 表达式,从而获取数据。
  2. 分级信息对象列表,可用于将唯一值符号与从字段或表达式返回的预期值范围进行匹配。

对于浅色底图或浅色背景的地图,较小数字级别通常使用浅色表示,而较大数字级别则用深色表示。

在定义此渲染对象时API提供了多种分类方法,但一般在开发中定义分级通常采用手动分类。

分级渲染非常适合用户对分级间隔特别明确的用户。每个级别的范围和级别总数量应该是经过仔细考虑后做出的慎重选择。

示例

按属性进行定量

此示例演示了如何使用一个字段数据属性定量化另一个字段数据。在绝大多数情况下,不会使用面数据个数去定量数据差距。应按基值或多边形的面积进行定量。

该例子显示了 25 岁及以上的人没有参加任何高中课程的占比情况。

  1. 创建分级渲染对象
  2. 设置数据字段名称,此处为未完成高中学业的总人数。
  3. 在本例中,引用 normalizationField,其值为 25 岁及以上的总人数。field 值将除以 normalizationField 的值。
  4. 创建四个分级信息对象并为每个范围分配一个符号。
  5. 也可以选择性地添加一个默认符号以表示不在以上间隔范围内的默认值。
49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 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 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92 92
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
      GeoScene Developer Guide: Class breaks
    </title>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    </style>

    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/renderers/ClassBreaksRenderer",
        "geoscene/views/MapView",
        "geoscene/layers/FeatureLayer",
        "geoscene/widgets/Legend",
        "geoscene/widgets/Expand",
      ], function (geosceneConfig,Map, ClassBreaksRenderer, MapView, FeatureLayer, Legend, Expand) {
        geosceneConfig.apiKey = "YOUR_API_KEY";
        function createSymbol(color){
          return {
            type: "simple-fill",
            style: "solid",
            outline: {
              width: 0.2,
              color: [255, 255, 255, 0.2]
        const renderer = new ClassBreaksRenderer({
          field: "NOHS_CY",
          normalizationField: "EDUCBASECY",
          legendOptions: {
            title: "% of adults with no high school education"
          },
          defaultSymbol: {
            type: "simple-fill",
            color: "black",
            style: "backward-diagonal",
            outline: {
              width: 0.5,
              color: [50, 50, 50, 0.6]
            }
          },
          defaultLabel: "no data",
          classBreakInfos: [
            {
              minValue: 0,
              maxValue: 0.04999,
              symbol: createSymbol("#edf8fb"),
              label: "< 5%"
            },
            {
              minValue: 0.05,
              maxValue: 0.14999,
              symbol: createSymbol("#b3cde3"),
              label: "5 - 15%"
            },
            {
              minValue: 0.15,
              maxValue: 0.24999,
              symbol: createSymbol("#8c96c6"),
              label: "15 - 25%"
            },
            {
              minValue: 0.25,
              maxValue: 1.0,
              symbol: createSymbol("#88419d"),
              label: "> 25%"
            }
          ]
        });
          type: "size",
          valueExpression: "$view.scale",
          target: "outline",
          stops: [
            { size: 2, value: 56187 },
            { size: 1, value: 175583 },
            { size: 0.5, value: 702332 },
            { size: 0, value: 1404664 }
        const layer = new FeatureLayer({
          portalItem: {
            id: "1cbb0faa0f1f424bbe213bfae9319309"
          title: "Census tracts",
          renderer: renderer,
          popupTemplate: {
            content: "{NOHS_CY} adults 25 years old and older in this census tract did not attend high school."
          opacity: 1
        const map = new Map({
          basemap: {
            portalItem: {
              id: "3582b744bba84668b52a16b0b6942544"
          layers: [ layer ],
          constraints: {
            snapToZoom: false
        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 577790,
          center: [-117.8099, 34.0441]
        const legend = new Legend({
          view: view
        view.ui.add(new Expand({
          view: view,
          content: legend,
          expanded: true
        }), "top-right");
    </script>
  </head>

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

按面积进行定量

此示例演示了如何利用每个多边形的面积来定量级别。 该示例展示了每平方英里的住户数量。此值是使用 Arcade 表达式在客户端上计算得到的。

  1. 创建分级渲染对象。
  2. 编写 Arcade 表达式以按要素的面积进行定量,并在渲染对象的 valueExpression 属性中引用它。
  3. 创建四个分类间隔信息对象,并为每个值范围分配一个符号。
  4. 也可以选择性地添加一个默认符号,以表示不在间隔范围内的默认值。
按面积量化住户数的 Arcade 表达式
                                                                                                                                           
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
      GeoScene Developer Guide: Class breaks-Arcade
    </title>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/renderers/ClassBreaksRenderer",
        "geoscene/views/MapView",
        "geoscene/layers/FeatureLayer",
        "geoscene/widgets/Legend",
        "geoscene/widgets/Expand",
      ], function (geosceneConfig,Map, ClassBreaksRenderer, MapView, FeatureLayer, Legend, Expand) {

        geosceneConfig.apiKey = "YOUR_API_KEY";
        function createSymbol(color){
          return {
            type: "simple-fill",
            color,
            style: "solid",
            outline: {
              width: 0.2,
              color: [255, 255, 255, 0.2]
            }
          };
        }


        const renderer = new ClassBreaksRenderer({
          valueExpression: `

            $feature.TOTHH_CY / AreaGeodetic($feature, 'square-miles');

          `,
          valueExpressionTitle: "Households per square mile",
          classBreakInfos: [
            {
              minValue: 0,
              maxValue: 2500,
              symbol: createSymbol("#edf8fb"),
              label: "< 2,500"
            },
            {
              minValue: 2500,
              maxValue: 5000,
              symbol: createSymbol("#b3cde3"),
              label: "2,500 - 5,000"
            },
            {
              minValue: 5000,
              maxValue: 10000,
              symbol: createSymbol("#8c96c6"),
              label: "5000 - 10,000"
            },
            {
              minValue: 10000,
              maxValue: 1000000,
              symbol: createSymbol("#88419d"),
              label: "> 10,000"
            }
          ]
        });


        const layer = new FeatureLayer({
          portalItem: {
            id: "1cbb0faa0f1f424bbe213bfae9319309"
          },
          title: "Census tracts",
          renderer: renderer,
          popupTemplate: {
            content: "{TOTHH_CY} households are in this census tract.",
            fieldInfos: [{
              fieldName: "TOTHH_CY",
              format: {
                places: 0,
                digitSeparator: true
              }
            }]
          },
          opacity: 1
        });

        const map = new Map({
          basemap: {
            portalItem: {
              id: "3582b744bba84668b52a16b0b6942544"
            }
          },
          layers: [ layer ]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 577790,
          center: [-117.8099, 34.0441],
          constraints: {
            snapToZoom: false
          }
        });

        const legend = new Legend({
          view: view
        });

        view.ui.add(new Expand({
          view: view,
          content: legend,
          expanded: true
        }), "top-right");
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
在 ClassBreaksRenderer 中引用表达式
48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 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 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82 82
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
      GeoScene Developer Guide: Class breaks-Arcade
    </title>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    </style>

    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/renderers/ClassBreaksRenderer",
        "geoscene/views/MapView",
        "geoscene/layers/FeatureLayer",
        "geoscene/widgets/Legend",
        "geoscene/widgets/Expand",
      ], function (geosceneConfig,Map, ClassBreaksRenderer, MapView, FeatureLayer, Legend, Expand) {
        geosceneConfig.apiKey = "YOUR_API_KEY";
        function createSymbol(color){
          return {
            type: "simple-fill",
            style: "solid",
            outline: {
              width: 0.2,
              color: [255, 255, 255, 0.2]
        const renderer = new ClassBreaksRenderer({
          valueExpression: `

            $feature.TOTHH_CY / AreaGeodetic($feature, 'square-miles');

          `,
          valueExpressionTitle: "Households per square mile",
          classBreakInfos: [
            {
              minValue: 0,
              maxValue: 2500,
              symbol: createSymbol("#edf8fb"),
              label: "< 2,500"
            },
            {
              minValue: 2500,
              maxValue: 5000,
              symbol: createSymbol("#b3cde3"),
              label: "2,500 - 5,000"
            },
            {
              minValue: 5000,
              maxValue: 10000,
              symbol: createSymbol("#8c96c6"),
              label: "5000 - 10,000"
            },
            {
              minValue: 10000,
              maxValue: 1000000,
              symbol: createSymbol("#88419d"),
              label: "> 10,000"
            }
          ]
        });
        const layer = new FeatureLayer({
          portalItem: {
            id: "1cbb0faa0f1f424bbe213bfae9319309"
          title: "Census tracts",
          renderer: renderer,
          popupTemplate: {
            content: "{TOTHH_CY} households are in this census tract.",
            fieldInfos: [{
              fieldName: "TOTHH_CY",
              format: {
                places: 0,
                digitSeparator: true
          opacity: 1
        const map = new Map({
          basemap: {
            portalItem: {
              id: "3582b744bba84668b52a16b0b6942544"
          layers: [ layer ]
        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 577790,
          center: [-117.8099, 34.0441],
          constraints: {
            snapToZoom: false
        const legend = new Legend({
          view: view
        view.ui.add(new Expand({
          view: view,
          content: legend,
          expanded: true
        }), "top-right");
    </script>
  </head>

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

3D 中的分级点符号

此示例根据地震的震级来可视化地球上的地震。该地图展示了造成严重损害的大地震、仅对不抗震建筑物造成损害的中度地震以及不会造成任何严重损害的小地震。通过这三个分级信息的分级渲染一目了然地查看地震情况。

步骤

  1. 创建三个等级:高震级地震(大于 7 级)、中震级地震(大于 5 级且小于 7 级)和小震级地震(小于 5 级)。
  2. 为每个级别分配一个直观的符号。
  3. 在分级渲染对象上设置这些级别。
  4. 为地震图层设置分级渲染对象。
137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 137 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 179 179 179 179 179 179 179 179 179 179 179 179 179 179 179
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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      GeoScene Developer Guide: Class breaks (3D)
    </title>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    </style>

    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/layers/GeoJSONLayer",
        "geoscene/views/SceneView",
        "geoscene/Basemap",
        "geoscene/layers/TileLayer",
        "geoscene/widgets/Legend",
      ], function(geosceneConfig,Map, GeoJSONLayer, SceneView, Basemap, TileLayer, Legend) {
        geosceneConfig.apiKey = "YOUR_API_KEY";
        const map = new Map({
          basemap: new Basemap({
            baseLayers: [
              new TileLayer({
                url:
                  "https://tiles.geoscene.cn/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/VintageShadedRelief/MapServer",
                opacity: 0.7,
                minScale: 0,
          ground: {
            surfaceColor: [255, 255, 255],
        const view = new SceneView({
          container: "viewDiv",
          camera: {
            position: [-96.22, 15.26, 20000000],
            heading: 0,
            tilt: 0,
          qualityProfile: "high",
          map: map,
          alphaCompositingEnabled: true,
          environment: {
            background: {
              type: "color",
              color: [0, 0, 0, 0],
            lighting: {
              date:
                "Sun Jul 15 2018 21:04:41 GMT+0200 (Central European Summer Time)",
            starsEnabled: false,
            atmosphereEnabled: false,
          highlightOptions: {
            fillOpacity: 0,
            color: "#ffffff",
          constraints: {
            altitude: {
              min: 400000,
        const url =
          "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
        const earthquakesLayer = new GeoJSONLayer({
          url: url,
          copyright: "USGS Earthquakes",
          screenSizePerspectiveEnabled: false,
          title: "Earthquakes in the last 30 days",
          popupTemplate: {
            title: "Earthquake Info",
            content:
              "Magnitude <b>{mag}</b> {type} hit <b>{place}</b> on <b>{time}</b>",
            fieldInfos: [
                fieldName: "time",
                format: {
                  dateFormat: "short-date-short-time",
        //每个地震类别的符号由多个符号图层组成 
        const baseSymbolLayer = {
          type: "icon",
          resource: { primitive: "circle" },
          material: { color: [245, 116, 73, 0.9] },
          size: 3,
        const secondSymbolLayer = {
          type: "icon",
          resource: { primitive: "circle" },
          material: { color: [245, 116, 73, 0] },
          outline: { color: [245, 116, 73, 0.7], size: 1 },
          size: 20,
        const thirdSymbolLayer = {
          type: "icon",
          resource: { primitive: "circle" },
          material: { color: [245, 116, 73, 0] },
          outline: { color: [245, 116, 73, 0.5], size: 1 },
          size: 40,
        const renderer = {
          type: "class-breaks",
          field: "mag",
          legendOptions: {
            title: "Legend",
          },
          classBreakInfos: [
            {
              minValue: -2,
              maxValue: 5,
              symbol: {
                type: "point-3d",
                symbolLayers: [baseSymbolLayer],
              },
              label: "Magnitude < 5",
            },
            {
              minValue: 5,
              maxValue: 7,
              symbol: {
                type: "point-3d",
                symbolLayers: [baseSymbolLayer, secondSymbolLayer],
              },
              label: "Magnitude between 5 and 7",
            },
            {
              minValue: 7,
              maxValue: 10,
              symbol: {
                type: "point-3d",
                symbolLayers: [
                  baseSymbolLayer,
                  secondSymbolLayer,
                  thirdSymbolLayer,
                ],
              },
              label: "Magnitude larger than 7",
            },
          ],
        };

        earthquakesLayer.renderer = renderer;
        const legend = new Legend({
          view: view,
        view.ui.add(legend, "top-right")
    </script>
  </head>

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

API 支持

完全支持部分支持不支持
  • 1. 仅颜色
  • 2. 仅支持点符号按大小变化
  • 3. 不支持3D点符号按大小变化

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.