位置样式
山洪灾害预警 (2002 - 2012)。所有警告区均被赋予相同的透明符号，这使得活动更激烈的区域可以更清楚地显示出来。
什么是位置样式？
位置样式是指使用单个符号对图层中的所有要素进行样式化。旨在仅可视化要素的位置。位置或几何是区分一个要素和另一个要素的唯一方法。通过位置可以平等地对待所有要素，并让它们的空间模式在地图上更加明显。
如何按位置样式化要素
通常，可使用两种方法来样式化要素：
给图形设置符号：通过这种方法可以展示地图或者场景中的一些临时图形，其中符号类型必须与图形的几何类型相匹配。了解有关如何在Graphics中创建图形。
对数据图层设置渲染方式（通过符号）：使用此方法可在地图或场景中为数据图层中的所有要素定义样式。渲染对象定义了将符号应用于要素的规则，例如如何根据数据值为要素着色或调整大小。
简单渲染
位置样式是一种简单渲染方式。使用简单渲染对象，符号的所有视觉属性（例如大小、颜色、不透明度、纹理等）对于每个要素都是固定的。可视化的主要目的是显示要素的位置，而不是关于要素属性的特性。例如，如果您想知道气象站的位置，但不需要了解每个站点的额外属性信息，则应使用相同的符号渲染所有点。
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
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
GeoScene Developer Guide: 2D Points
</title>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: rgba(15, 15, 15, 1);
}
</style>
<script>
require([
"geoscene/config",
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/layers/FeatureLayer",
"geoscene/symbols/SimpleMarkerSymbol",
"geoscene/renderers/SimpleRenderer"
], function (
geosceneConfig,
Map,
MapView,
FeatureLayer,
SimpleMarkerSymbol,
SimpleRenderer
) {
const renderer = new SimpleRenderer({
symbol: new SimpleMarkerSymbol({
size: 4,
color: [0, 255, 255],
outline: null
})
});
const weatherStations = new FeatureLayer({
portalItem: {
id: "cb1886ff0a9d4156ba4d2fadd7e8a139"
},
renderer: renderer
});
// Add the layers to the map
const map = new Map({
basemap: "tianditu-image",
layers: [weatherStations]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 3,
center: [-95, 38],
constraints: {
snapToZoom:false
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>符号
地图中的要素样式由符号进行定义。符号既可以表达数据也可以表达与其他要素的关系。
为图层选择符号取决于它的视图（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 示例
点
可视化点要素，可以使用SimpleRenderer类设置单一标记符号、图片标记符号或 CIM 符号，并将渲染对象赋给图层。这样所有要素都将以相同的符号显示在视图中。
此示例展示了气象站的位置。
- 创建单一标记符号，并将其添加到SimpleRenderer对象中。
- 为数据图层设置渲染对象。
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
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
GeoScene Developer Guide: 2D Points
</title>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: rgba(15, 15, 15, 1);
}
</style>
<script>
require([
"geoscene/config",
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/layers/FeatureLayer",
"geoscene/symbols/SimpleMarkerSymbol",
"geoscene/renderers/SimpleRenderer"
], function (
geosceneConfig,
Map,
MapView,
FeatureLayer,
SimpleMarkerSymbol,
SimpleRenderer
) {
const renderer = new SimpleRenderer({
symbol: new SimpleMarkerSymbol({
size: 4,
color: [0, 255, 255],
outline: null
})
});
const weatherStations = new FeatureLayer({
portalItem: {
id: "cb1886ff0a9d4156ba4d2fadd7e8a139"
},
renderer: renderer
});
// Add the layers to the map
const map = new Map({
basemap: "tianditu-image",
layers: [weatherStations]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 3,
center: [-95, 38],
constraints: {
snapToZoom:false
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>线
可视化线要素，使用简单线符号或 cim 符号，以及SimpleRenderer类。
此示例使用单一符号显示主要公路的位置。
步骤
- 创建简一线符号，并将其添加到SimpleRenderer对象。
- 为数据图层设置渲染对象。
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
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
GeoScene Developer Guide: 2D Lines
</title>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: rgba(15, 15, 15, 1);
}
</style>
<script>
require([
"geoscene/config",
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/layers/FeatureLayer",
"geoscene/symbols/SimpleLineSymbol",
"geoscene/renderers/SimpleRenderer"
], function (
geosceneConfig,
Map,
MapView,
FeatureLayer,
SimpleLineSymbol,
SimpleRenderer
) {
const renderer = new SimpleRenderer({
symbol: new SimpleLineSymbol({
width: 1,
color: "#fb12ff",
})
});
// Set the renderer on the layer
const hwyLayer = new FeatureLayer({
url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Freeway_System/FeatureServer/2",
renderer: renderer,
title: "USA Freeway System",
minScale: 0,
maxScale: 0
});
// Add the layers to the map
const map = new Map({
basemap: "tianditu-image",
layers: [ hwyLayer ]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 3,
center: [-95, 38],
constraints: {
snapToZoom:false
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>面
要在地图中可视化面要素，可以使用简单填充符号或图片填充符号。可以使用单一标记符号、图片标记符号、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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Location style - polygons</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%;
}
#titleDiv {
padding: 10px;
}
#titleText {
font-size: 20pt;
font-weight: 60;
padding-bottom: 10px;
}
</style>
<script>
require([
"geoscene/views/MapView",
"geoscene/Map",
"geoscene/layers/FeatureLayer",
"geoscene/renderers/SimpleRenderer",
"geoscene/symbols/SimpleFillSymbol"
], function (
MapView, Map, FeatureLayer, SimpleRenderer, SimpleFillSymbol
) {
// flash flood warnings layer
const layer = new FeatureLayer({
portalItem: {
id: "f9e348953b3848ec8b69964d5bceae02"
}
});
layer.renderer = new SimpleRenderer({
symbol: new SimpleFillSymbol({
color: "rgba(0,76,115,0.04)",
outline: null
})
});
const map = new Map({
basemap: "gray-vector",
layers: [layer]
});
const view = new MapView({
map,
container: "viewDiv",
center: [-98, 40],
zoom: 3
});
view.ui.add("titleDiv", "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="titleDiv" class="geoscene-widget">
<div id="titleText">Flash Floods by Season</div>
<div>Flash Flood Warnings (2002 - 2012)</div>
</div>
</body>
</html>3D 示例
点
在场景中可视化点要素的位置，请在SimpleRenderer中设置标记符号或 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
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
GeoScene Developer Guide: 3D Points
</title>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: #a2c9e5;
background: linear-gradient(150deg, #beb5ce, #a2c9e5) no-repeat;
}
#view {
height: 100%;
width: 100%;
}
#view canvas {
filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
}
</style>
<script>
require([
"geoscene/config",
"geoscene/WebScene",
"geoscene/views/SceneView",
"geoscene/layers/FeatureLayer",
"geoscene/layers/support/LabelClass",
"geoscene/renderers/SimpleRenderer",
"geoscene/symbols/PointSymbol3D",
"geoscene/symbols/IconSymbol3DLayer",
], function(
geosceneConfig,
WebScene,
SceneView,
FeatureLayer,
LabelClass,
SimpleRenderer,
PointSymbol3D,
IconSymbol3DLayer
) {
geosceneConfig.apiKey = "YOUR_API_KEY";
const renderer = new SimpleRenderer({
symbol: new PointSymbol3D({
symbolLayers: [
new IconSymbol3DLayer({
resource: {
href:
"https://www.geosceneonline.cn/geoscene/styleItems/Icons/web/resource/Pushpin3.svg",
},
size: 15,
material: {
color: "#4c397f",
},
anchor: "bottom",
}),
],
}),
});
const webscene = new WebScene({
basemap: null,
ground: {
surfaceColor: [0, 0, 0, 0],
},
})
const view = new SceneView({
container: "view",
map: webscene,
alphaCompositingEnabled: true,
qualityProfile: "high",
camera: {
position: {
spatialReference: {
wkid: 4326,
},
x: 94.28248677690586,
y: 21.553684553226123,
z: 25000000,
},
heading: 0,
tilt: 0.12089379039103153,
},
constraints: {
altitude: {
min: 18000000,
max: 25000000,
},
},
environment: {
background: {
type: "color",
color: [0, 0, 0, 0],
},
lighting: {
date:
"Sun Jul 15 2018 15:30:00 GMT+0900 (W. Europe Daylight Time)",
},
starsEnabled: false,
atmosphereEnabled: false,
},
})
window.view = view
view.ui.empty("top-left")
const countryBoundaries = new FeatureLayer({
url:
"http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer",
title: "World Countries",
renderer: {
type: "simple",
symbol: {
type: "polygon-3d",
symbolLayers: [
{
type: "fill",
material: {
color: "white",
},
},
],
},
},
});
const populationLayer = new FeatureLayer({
url:
"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Cities_analysis/FeatureServer",
definitionExpression: "POP > 6000000",
renderer: renderer,
screenSizePerspectiveEnabled: false,
labelingInfo: [
new LabelClass({
labelExpressionInfo: { expression: "$feature.CITY_NAME" },
symbol: {
type: "label-3d",
symbolLayers: [
{
type: "text", // autocasts as new TextSymbol3DLayer()
material: { color: "#4c397f" },
size: 10,
font: {
family: "Open Sans",
weight: "bold",
},
halo: {
color: "white",
size: 1,
},
},
],
},
}),
],
})
const graticule = new FeatureLayer({
url:
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/World_graticule_15deg/FeatureServer",
renderer: {
type: "simple",
symbol: {
type: "line-3d",
symbolLayers: [
{
type: "line",
material: {
color: [255, 255, 255, 0.8],
},
size: 1,
},
],
},
},
})
webscene.addMany([countryBoundaries, graticule, populationLayer])
})
</script>
</head>
<body>
<div id="view"></div>
</body>
</html>线
要可视化场景中线要素的位置，请在简单渲染对象中设置线符号或 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
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
GeoScene Developer Guide: 3D Lines
</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/views/SceneView",
"geoscene/layers/FeatureLayer",
"geoscene/renderers/SimpleRenderer",
"geoscene/symbols/LineSymbol3D",
"geoscene/symbols/PathSymbol3DLayer",
], function(
geosceneConfig,
Map,
SceneView,
FeatureLayer,
SimpleRenderer,
LineSymbol3D,
PathSymbol3DLayer
) {
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",
}),
],
}),
})
const webscene = new Map({
basemap: "geoscene-light-gray",
})
const view = new SceneView({
container: "viewDiv",
map: webscene,
qualityProfile: "high",
camera: {
position: [
-74.02689962,
40.69937406,
502.59973
],
heading: 56.33,
tilt: 71.49
},
environment: {
lighting: {
directShadowsEnabled: true,
ambientOcclusionEnabled: true,
},
atmosphere: {
quality: "high",
},
},
})
const roadsLayer = new FeatureLayer({
url:
"https://services1.arcgis.com/4yjifSiIG17X0gW4/arcgis/rest/services/StreetAssessmentRatingNYC/FeatureServer",
elevationInfo: {
mode: "relative-to-ground",
offset: 0,
},
title: "Strees in Manhattan",
renderer: renderer,
})
webscene.add(roadsLayer)
})
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>面
要在场景中可视化面要素，请使用填充符号或根据真实世界的高度拉伸面。以下示例演示了以固定高度拉伸建筑物轮廓，以显示城市中的建筑示意图。
步骤
- 创建拉伸面符号，并将其添加到简单渲染对象中。
- 将渲染对象应用于数据图层。
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
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
GeoScene Developer Guide: 3D Polygons
</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/views/SceneView",
"geoscene/layers/FeatureLayer",
"geoscene/symbols/PolygonSymbol3D",
"geoscene/symbols/ExtrudeSymbol3DLayer",
"geoscene/renderers/SimpleRenderer"
], function (
geosceneConfig,
Map,
SceneView,
FeatureLayer,
PolygonSymbol3D,
ExtrudeSymbol3DLayer,
SimpleRenderer
) {
const renderer = new SimpleRenderer({
symbol: new PolygonSymbol3D({
symbolLayers: [ new ExtrudeSymbol3DLayer({
material: {
color: "#ffc53d"
},
size: 10,
edges: {
type: "solid",
color: "#a67400",
size: 1.5
}
})]
})
});
var buildingsLayer = new FeatureLayer({
url:
"https://services1.arcgis.com/jjVcwHv9AQEq3DH3/arcgis/rest/services/Buildings/FeatureServer/0",
renderer: renderer
});
var map = new Map({
basemap: "geoscene-light-gray",
ground: "world-elevation",
layers: [buildingsLayer]
});
var view = new SceneView({
container: "viewDiv",
map: map,
qualityProfile: "high",
camera: {
position: {
x: -8354148,
y: 4641966,
z: 129,
spatialReference: {
wkid: 3857
}
},
heading: 300,
tilt: 75
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>