唯一值类型

按高速公路类型进行唯一值渲染的高速公路

什么是唯一值类型样式?

唯一值类型样式可以基于要素中一个或多个属性字段进行绘制。它使用不同的符号表示由唯一属性值定义的各个类别,例如:

  • 在地图上显示感兴趣点(例如学校、公园、宗教地点)
  • 表示数据的类别(比如区域、类型)
  • 可视化排序数据(例如高、中、低)

唯一值类型样式的工作原理

此样式使用唯一值渲​​染器进行配置。此渲​​染器需要满足以下条件:

  1. 基于字段名称或 Arcade 表达式引用数据值。
  2. 唯一值信息列表,可用于将唯一值符号和从字段或表达式返回的预期值进行匹配。

示例

分类数据

此示例演示了如何使用属性值可视化类别。该应用程序根据高速公路类别对其进行可视化:分为公路、国道或高速公路。

  1. 创建唯一值渲​​染器
  2. 引用包含分类值的字段名称。
  3. 创建唯一值信息对象,并为每个预期值分配一个符号。
  4. 添加默认符号,没有匹配值的要素可以使用该默认符号。
展开
代码块使用深色复制
41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 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 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76
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
        const hwyRenderer = {
          type: "unique-value",
          legendOptions: {
            title: "Freeway type"
          },
          field: "RTTYP",
          uniqueValueInfos: [{
            value: "S",
            label: "State highway",
            symbol: {
              type: "simple-line",
              color: "#e6d800",
              width: "6px",
              style: "solid"
            }
          }, {
            value: "I",
            label: "Interstate",
            symbol: {
              type: "simple-line",
              color: "#e60049",
              width: "6px",
              style: "solid"
            }
          }, {
            value: "U",
            label: "US Highway",
            symbol: {
              type: "simple-line",
              color: "#9b19f5",
              width: "6px",
              style: "solid"
            }
          }]
        };
 
展开

感兴趣点 (3D)

此示例演示了如何在 3D 场景中可视化感兴趣点 (POI)。此示例演示了如何使用 PictureMarkerSymbol 创建 POI 符号。您也可使用 web 样式来创建相同的可视化效果。

  1. 创建唯一值渲​​染器
  2. 引用包含位置类型的字段名 (例如 museumpark 等)。
  3. 创建唯一值信息对象,并为每个预期值分配一个符号。
展开
代码块使用深色复制
96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 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 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124 124
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
        // Expand the code above to view how each marker
        // symbol is created in getUniqueValueSymbol()
        const pointsRenderer = {
          type: "unique-value",
          field: "Type",
          uniqueValueInfos: [
            {
              value: "Museum",
              symbol: getUniqueValueSymbol("https://doc.geoscene.cn/javascript/4.25/sample-code/visualization-point-styles/live/Museum.png", "#D13470")
            },
            {
              value: "Restaurant",
              symbol: getUniqueValueSymbol("https://doc.geoscene.cn/javascript/4.25/sample-code/visualization-point-styles/live/Restaurant.png", "#F97C5A")
            },
            {
              value: "Church",
              symbol: getUniqueValueSymbol("https://doc.geoscene.cn/javascript/4.25/sample-code/visualization-point-styles/live/Church.png", "#884614")
            },
            {
              value: "Hotel",
              symbol: getUniqueValueSymbol("https://doc.geoscene.cn/javascript/4.25/sample-code/visualization-point-styles/live/Hotel.png", "#56B2D6")
            },
            {
              value: "Park",
              symbol: getUniqueValueSymbol("https://doc.geoscene.cn/javascript/4.25/sample-code/visualization-point-styles/live/Park.png", "#40C2B4")
            }
          ]
        };
 
展开

序数数据

此示例演示了如何使用 Arcade 表达式从数值字段属性创建序数类别。此应用程序按低、中、高卡车流量对高速公路进行分类。

  1. 创建唯一值渲染器。
  2. 编写一个 Arcade 表达式,将数据按低、中、高的顺序进行分类。然后在 valueExpression 属性中引用它。请参阅以下代码片段。
  3. 创建唯一值信息对象,并为每个预期值分配一个符号。
  4. 添加默认符号,没有匹配值的要素可以使用该默认符号。
使用 Arcade 表达式对数值数据进行分类
代码块使用深色复制
32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 33 34 35 36 37 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38
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
      var traffic = $feature.AADT;
      When(
        traffic > 80000, "High",
        traffic > 20000, "Medium",
        "Low"
      );
 
在 valueExpression 属性中引用 Arcade 表达式
展开
代码块使用深色复制
53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 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 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90
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
        const renderer = {
          type: "unique-value",
          valueExpression: `
            var traffic = $feature.AADT;
            When(
              traffic > 80000, "High",
              traffic > 20000, "Medium",
              "Low"
            );
          `,
          valueExpressionTitle: "Traffic volume",
          uniqueValueInfos: [{
            value: "High",
            symbol: {
              type: "simple-line",
              color: "#810f7c",
              width: "6px",
              style: "solid"
            }
          }, {
            value: "Medium",
            symbol: {
              type: "simple-line",
              color: "#8c96c6",
              width: "3px",
              style: "solid"
            }
          }, {
            value: "Low",
            symbol: {
              type: "simple-line",
              color: "#9d978b",
              width: "1px",
              style: "solid"
            }
          }]
        };
 
展开

分类数据 (3D)

此示例根据建筑物类型进行可视化:住宅、商业或混合用途。唯一值渲​​染器根据建筑物的用途属性为每个建筑物分配颜色。

步骤

  1. 为每种建筑物类型创建不同的符号。
  2. 将符号分配给唯一值渲染器。
  3. 将渲染器分配给场景图层。
展开
代码块使用深色复制
37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 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 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108 108
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
        const typeRenderer = {
          type: "unique-value",
          legendOptions: {
            title: "Building Type"
          },
          defaultSymbol: {
            type: "mesh-3d",
            symbolLayers: [
              {
                type: "fill",
                material: { color: "#FFB55A", colorMixMode: "replace" }
              }
            ]
          },
          defaultLabel: "Others",
          field: "landuse",
          uniqueValueInfos: [
            {
              value: "MIPS",
              symbol: {
                type: "mesh-3d",
                symbolLayers: [
                  {
                    type: "fill",
                    material: { color: "#FD7F6F", colorMixMode: "replace" }
                  }
                ]
              },
              label: "Office"
            },
            {
              value: "RESIDENT",
              symbol: {
                type: "mesh-3d",
                symbolLayers: [
                  {
                    type: "fill",
                    material: { color: "#7EB0D5", colorMixMode: "replace" }
                  }
                ]
              },
              label: "Residential"
            },
            {
              value: "MIXRES",
              symbol: {
                type: "mesh-3d",
                symbolLayers: [
                  {
                    type: "fill",
                    material: { color: "#BD7EBE", colorMixMode: "replace" }
                  }
                ]
              },
              label: "Mixed use"
            },
            {
              value: "MIXED",
              symbol: {
                type: "mesh-3d",
                symbolLayers: [
                  {
                    type: "fill",
                    material: { color: "#B2E061", colorMixMode: "replace" }
                  }
                ]
              },
              label: "Mixed use without residential"
            }
          ]
        };
 
展开
按类型可视化要素的相关示例的图像预览

按类型可视化要素

按类型可视化要素

生成唯一值的数据驱动可视化的相关示例的图像预览

生成唯一值的数据驱动可视化

生成唯一值的数据驱动可视化

纹理建筑的着色选项的相关示例的图像预览

纹理建筑的着色选项

纹理建筑的着色选项

根据真实世界的高度拉伸建筑物覆盖区的相关示例的图像预览

根据真实世界的高度拉伸建筑物覆盖区

根据真实世界的高度拉伸建筑物覆盖区

使用 Arcade 创建自定义可视化的相关示例的图像预览

使用 Arcade 创建自定义可视化

使用 Arcade 创建自定义可视化

API 支持

完全支持部分支持不支持
  • 1.仅颜色
  • 2.仅点支持大小变量创建器
  • 3.3D 中不支持大小变量创建器

您的浏览器不再受支持。请升级您的浏览器以获得最佳体验。