唯一值类型

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

什么是唯一值类型?

唯一值是基于要素中一个或多个属性字段进行渲染。它用不同的符号表示由唯一属性值定义的各个类别,例如:

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

如何用唯一值类型表示要素

配置唯一值渲​​染器,需要定义两个条件:

  1. 指定field,可以是字段名或 Arcade 表达式。
  2. 设置uniqueValueInfos,field不同值类型及其对应符号的集合。

示例

分类数据

此示例演示了如何用唯一值类型渲染高速公路类别,分别有公路、国道或高速公路。

  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: "Highway",
            symbol: {
              type: "simple-line",
              color: "#9b19f5",
              width: "6px",
              style: "solid"
            }
          }]
        };
展开

感兴趣点 (3D)

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

  1. 创建唯一值渲​​染器
  2. 引用包含位置类型的字段名 (例如 museumpark 等)。
  3. 创建唯一值信息对象,并为每个预期值分配一个符号。
展开
代码块使用深色复制
95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 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 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123
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
        // 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.27/sample-code/visualization-point-styles/live/Museum.png", "#D13470")
            },
            {
              value: "Restaurant",
              symbol: getUniqueValueSymbol("https://doc.geoscene.cn/javascript/4.27/sample-code/visualization-point-styles/live/Restaurant.png", "#F97C5A")
            },
            {
              value: "Church",
              symbol: getUniqueValueSymbol("https://doc.geoscene.cn/javascript/4.27/sample-code/visualization-point-styles/live/Church.png", "#884614")
            },
            {
              value: "Hotel",
              symbol: getUniqueValueSymbol("https://doc.geoscene.cn/javascript/4.27/sample-code/visualization-point-styles/live/Hotel.png", "#56B2D6")
            },
            {
              value: "Park",
              symbol: getUniqueValueSymbol("https://doc.geoscene.cn/javascript/4.27/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"
            }
          ]
        };
展开

API 支持

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

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