山洪灾害预警 (2002 - 2012)。所有警告区均被赋予相同的透明符号，这使得活动更激烈的区域可以更清楚地显示出来。
什么是位置样式？
位置样式是指使用单个符号对图层中的所有要素进行样式化。其旨在仅可视化要素的位置。位置或几何是区分一个要素和另一个要素的唯一方法。通过位置可以平等地对待所有要素，并让它们的空间模式在地图上更加明显。
如何按位置样式化要素
通常，可使用两种方法来样式化要素：
给图形设置符号：通过这种方法可以展示地图或者场景中的一些临时图形。符号类型必须与图形的几何类型相匹配。要了解有关如何创建图形的更多信息，请参阅图形。
为数据图层设置渲染器（通过符号）：使用此方法可在地图或场景中为数据图层中的所有要素定义样式。渲染器定义了将符号应用于要素的规则，例如如何根据数据值为要素着色或调整大小。
简单渲染器
位置样式是一种简单渲染方式。使用简单渲染器，符号的所有视觉属性（例如大小、颜色、不透明度、纹理等）对于每个要素都是固定的。可视化的主要目的是显示要素的位置，而不是关于要素属性的特性。例如，如果您想知道气象站的位置，但不需要了解每个站点的额外属性信息，则应使用相同的符号渲染所有点。
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
const renderer = new SimpleRenderer({
symbol: new SimpleMarkerSymbol({
size: 4,
color: [0, 255, 255],
outline: null
})
});
符号
地图中的要素样式由符号进行定义。符号既可以表达数据也可以表达与其他要素的关系。
为图层选择符号取决于其渲染视图（2D 或 3D），以及图层中要素的几何类型（点、线、面或网格）。
2D 符号
您可以使用 2D 符号对点、线和面几何进行样式设置，并在地图中显示它们。主要类型有标记、线状、填充、图片和文本符号。请参阅以下更多示例。
1
2
3
4
5
6
7
8
const symbol = new SimpleMarkerSymbol({
color: "rgba(0,128,155,0.8)",
size: "10px",
outline: new SimpleLineSymbol({
width: 0.5,
color: "rgba(255,255,255,0.3)"
})
});
3D 符号
您可以使用 3D 符号来设置点、线、面和网格几何的样式，并在场景中显示它们。在场景中，可以选择两种类型的符号：
- 2D 符号，如标记符号、线符号和面填充符号。
- 3D 符号，如 3D 模型符号、路径符号和拉伸面符号。
请参阅以下更多示例。
1
2
3
4
5
6
7
8
9
10
const pointSymbol = new PointSymbol3D({
symbolLayers: [ new IconSymbol3DLayer({
resource: { href: "pin.svg" },
size: 15,
material: {
color: "#4c397f"
},
anchor: "bottom"
})]
});
2D 示例
点
要可视化地图中点要素的位置，请在简单渲染器中设置简单标记符号、图片标记符号或 CIM 符号，然后在图层上设置渲染器。所有要素都将以相同的符号显示在视图中。
此示例展示了气象站的位置。
- 创建一个简单标记符号，并将其添加到简单渲染器中。
- 为数据图层设置渲染器。
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
const renderer = new SimpleRenderer({
symbol: new SimpleMarkerSymbol({
size: 4,
color: [0, 255, 255],
outline: null
})
});
线
要可视化地图中线要素的位置，请使用简单的线符号或 cim 符号以及简单渲染器。
此示例使用单一符号显示主要公路的位置。
步骤
- 创建一个简单线符号，并将其添加到简单渲染器中。
- 为数据图层设置渲染器。
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
const renderer = new SimpleRenderer({
symbol: new SimpleLineSymbol({
width: 1,
color: "#fb12ff",
})
});
面
要可视化地图中面要素的位置，可以使用简单填充符号或图片填充符号。也可使用简单标记符号、图片标记符号、web 样式符号或 cim 符号来可视化面的质心。
此示例使用透明的面可视化山洪警报。
步骤
- 创建一个简单填充符号，并将其添加到简单渲染器中。
- 为数据图层设置渲染器。
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
layer.renderer = new SimpleRenderer({
symbol: new SimpleFillSymbol({
color: "rgba(0,76,115,0.04)",
outline: null
})
});
3D 示例
点
要在场景中可视化点要素的位置，请在简单渲染器中设置标记符号或 3D 模型符号，并在图层上设置渲染对象。所有要素都将以相同的符号显示在视图中。此示例演示了如何创建显示世界各地城市的三维球体。城市符号是一个别针标记。
步骤
- 创建一个标记符号，并将其添加到简单渲染器中。
- 将渲染器应用于数据图层，以便每个要素均使用标记符号显示。
57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74
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
194
195
196
197
198
199
200
201
202
203
const renderer = new SimpleRenderer({
symbol: new PointSymbol3D({
symbolLayers: [
new IconSymbol3DLayer({
resource: {
href:
"https://static.arcgis.com/geoscene/styleItems/Icons/web/resource/Pushpin3.svg",
},
size: 15,
material: {
color: "#4c397f",
},
anchor: "bottom",
}),
],
}),
});
线
要在场景中可视化线要素的位置，请在简单渲染器中设置线符号或 3D 路径符号，并在图层上设置渲染对象。此示例展示了如何使用路径符号来样式化曼哈顿的街道。
步骤
- 创建路径符号，其中宽度和高度均为 10 米。
- 将其添加到简单渲染器。
- 将渲染器应用于数据图层。
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
const renderer = new SimpleRenderer({
symbol: new LineSymbol3D({
symbolLayers: [
new PathSymbol3DLayer({
profile: "quad",
material: {
color: [46, 255, 238],
},
width: 10,
height: 10,
join: "miter",
cap: "round",
anchor: "bottom",
profileRotation: "all",
}),
],
}),
})
面
要在场景中可视化面要素，请使用填充符号或根据真实世界的高度拉伸面。以下示例演示了以固定高度拉伸建筑物轮廓，以显示城市中的建筑示意图。
步骤
- 创建拉伸面符号，并将其添加到简单渲染器中。
- 将渲染器应用于数据图层。
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
const renderer = new SimpleRenderer({
symbol: new PolygonSymbol3D({
symbolLayers: [ new ExtrudeSymbol3DLayer({
material: {
color: "#ffc53d"
},
size: 10,
edges: {
type: "solid",
color: "#a67400",
size: 1.5
}
})]
})
});