全球场景和局部场景
使用不同投影的全球和局部场景以显示相同的底图图层和要素图层
什么是全球场景和局部场景？
全球场景和局部场景是用于可视化 3D 数据的不同查看模式。当您使用场景时，可以选择是在全球上渲染数据，也可以将数据投影到在一块区域上，在 3D 空间中展示。
全球场景通常用于显示跨越全球的数据，当查看地球曲率时，这非常重要。
局部场景是地表的投影视图，通常用于较小的范围。在可视化（如国家/地区或城市）数据时，它非常有用。要仅显示感兴趣的区域，可以将局部场景裁剪到某个范围。
在全球和局部场景中，您可以显示地下数据，并在地下和地上进行漫游。
如何创建场景
要创建全球或局部场景，请定义要显示的底图图层和数据图层，然后设置照相机属性。
定义场景
第一步是创建具有底图图层和/或数据图层的场景。您还可以引用高程服务以显示带有地貌的场景。
// 在 GeoScene JS API 中，使用 Map 类
// 定义地图和场景。
const map = new Map({
basemap: "tianditu-iamge",
ground: "world-elevation"
});
const sceneView = new SceneView({
map: map,
camera: {
position: [
-41.18215285,
-86.13467977,
9321113.29449
],
heading: 359.73,
tilt: 68.57
},
viewingMode: "local",
container: "view2Div",
qualityProfile: "high"
});
const globeView = new SceneView({
container: "view1Div",
map: map,
viewingMode: "global",
qualityProfile: "high",
environment: {
background: {
type: "color",
color: [255, 255, 255, 1]
},
starsEnabled: false,
atmosphereEnabled: false
}
});
const populationLayer = new FeatureLayer({
url:
"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Cities_analysis/FeatureServer",
definitionExpression: "POP > 10000000",
elevationInfo: {
mode: "on-the-ground",
},
renderer: {
type: "simple",
symbol: {
type: "point-3d",
symbolLayers: [
{
type: "object",
resource: { primitive: "cylinder" },
material: { color: "#4c397f" },
depth: 50000,
height: 1000000,
width: 50000,
anchor: "bottom"
},
{
type: "icon",
resource: { primitive: "circle" },
material: { color: [76, 57, 127, 0.1] },
outline: {
color: [76, 57, 127, 0.8]
},
size: 15
}
]
}
},
labelingInfo: [
new LabelClass({
labelExpressionInfo: { expression: "$feature.CITY_NAME" },
symbol: {
type: "label-3d",
symbolLayers: [
{
type: "text", // 自动转换为新的 TextSymbol3DLayer()
material: { color: "#4c397f" },
size: 10,
font: {
family: "Open Sans",
weight: "bold"
},
halo: {
color: "white",
size: 1
}
}
]
}
})
]
});
map.add(populationLayer);
})
</script>
</head>
<body>
<div id="view1Div" style="float: left; width: 50%; height: 100%"></div>
<div id="view2Div" style="float: left; width: 50%; height: 100%"></div>
</body>
</html>设置照相机
现在使用场景视图显示场景。可通过定义场景视图的照相机、指定相机的位置（包括高度）、方向和倾斜度（或俯仰）来设置场景视图的场景透视。
使用场景视图可以指定查看模式是 local 还是 global。
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
Globes and local scenes
</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 {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script>
require([
"geoscene/config",
"geoscene/Map",
"geoscene/views/SceneView",
"geoscene/layers/FeatureLayer",
"geoscene/layers/support/LabelClass",
], function(geosceneConfig,Map, SceneView, FeatureLayer, LabelClass) {
// 在 GeoScene JS API 中，使用 Map 类
//以定义地图和场景。
const map = new Map({
basemap: "geoscene-light-gray",
ground: "world-elevation"
});
const sceneView = new SceneView({
map: map,
camera: {
position: [
-41.18215285,
-86.13467977,
9321113.29449
],
heading: 359.73,
tilt: 68.57
},
viewingMode: "local",
container: "view2Div",
qualityProfile: "high"
});
const globeView = new SceneView({
container: "view1Div",
map: map,
viewingMode: "global",
qualityProfile: "high",
environment: {
background: {
type: "color",
color: [255, 255, 255, 1]
},
starsEnabled: false,
atmosphereEnabled: false
}
});
const populationLayer = new FeatureLayer({
url:
"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Cities_analysis/FeatureServer",
definitionExpression: "POP > 10000000",
elevationInfo: {
mode: "on-the-ground",
},
renderer: {
type: "simple",
symbol: {
type: "point-3d",
symbolLayers: [
{
type: "object",
resource: { primitive: "cylinder" },
material: { color: "#4c397f" },
depth: 50000,
height: 1000000,
width: 50000,
anchor: "bottom"
},
{
type: "icon",
resource: { primitive: "circle" },
material: { color: [76, 57, 127, 0.1] },
outline: {
color: [76, 57, 127, 0.8]
},
size: 15
}
]
}
},
labelingInfo: [
new LabelClass({
labelExpressionInfo: { expression: "$feature.CITY_NAME" },
symbol: {
type: "label-3d",
symbolLayers: [
{
type: "text", // 自动转换为新的 TextSymbol3DLayer()
material: { color: "#4c397f" },
size: 10,
font: {
family: "Open Sans",
weight: "bold"
},
halo: {
color: "white",
size: 1
}
}
]
}
})
]
});
map.add(populationLayer);
})
</script>
</head>
<body>
<div id="view1Div" style="float: left; width: 50%; height: 100%"></div>
<div id="view2Div" style="float: left; width: 50%; height: 100%"></div>
</body>
</html>