了解如何创建和显示具有底图图层和高程的场景。
场景包含以 3D 方式显示的地理数据图层。场景支持显示真实世界中的景观、实体、建筑物和其他 3D 对象的可视化。您可使用场景视图来显示场景，包括底图图层和数据图层，还可控制视图的中心位置、倾斜和角度。
在本教程中，将使用地形底图图层和世界高程图层创建并显示长白山的场景。场景和代码可用作其他 3D 教程的起点。
步骤
创建新 Pen
- 转至 CodePen，为您的制图应用程序创建新 Pen。
添加 HTML
定义 HTML 页面以创建一个场景，该场景使用浏览器窗口的全宽度和高度。
在 CodePen > HTML 中，添加 HTML 和 CSS 来为场景创建一个带有 viewDiv 元素的页面。
HTML 将创建一个具有页面全宽度和高度的场景。viewDiv 元素用于显示场景，其 CSS 可重置任何浏览器设置，因此它可以使用浏览器的全宽度和高度。
添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。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
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>GeoScene Maps SDK for JavaScript Tutorials: Display a scene</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
引用 API
在 <head> 标签中，添加对 CSS 文件和 JS 库的引用。
添加行。添加行。添加行。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
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>GeoScene Maps SDK for JavaScript Tutorials: Display a scene</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.geoscene.cn/4.25/geoscene/themes/light/main.css">
<script src="https://js.geoscene.cn/4.25/"></script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
添加模块
GeoScene Maps SDK for JavaScript 提供有 AMD 模块和 ES 模块，但本教程基于 AMD。AMD require 函数使用引用来确定加载哪些模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。
添加 <script> 标签和 require 语句以加载 Map 和 SceneView 模块。您还可将 JavaScript 代码添加到 CodePen > JS 面板，而不是 HTML 面板。如果这样做，请移除 <script> 标签。
添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。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
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>GeoScene Maps SDK for JavaScript Tutorials: Display a scene</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.geoscene.cn/4.25/geoscene/themes/light/main.css">
<script src="https://js.geoscene.cn/4.25/"></script>
<script>
require([
"geoscene/config",
"geoscene/Map",
"geoscene/views/SceneView"
], function(geosceneConfig, Map, SceneView) {
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
创建场景
使用 Map 定义底图图层和高程表面。场景使用高程图层中的信息来确定地图中渲染的 ground (表面) 高度。
返回至 CodePen。
在主函数的开头，设置 API 密钥。
添加行。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
<script>
require([
"geoscene/config",
"geoscene/Map",
"geoscene/views/SceneView"
], function(geosceneConfig, Map, SceneView) {
geosceneConfig.apiKey = "YOUR_API_KEY";
创建 Map 并将 basemap 属性设置为 tianditu-vector，并将 ground 属性设置为 world-elevation。
添加行。添加行。添加行。添加行。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
const map = new Map({
basemap: "tianditu-vector", //Basemap layer service
ground: "world-elevation", //Elevation service
});
创建场景视图
使用 SceneView 类以设置要绘制的 map 和图层，并定义相机位置。camera 是用于确定 SceneView 可见范围的点。tilt 属性指相机指向的表面的角度数。
创建 SceneView。设置 container、map 和 camera 属性。
添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。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
const map = new Map({
basemap: "tianditu-vector", //Basemap layer service
ground: "world-elevation", //Elevation service
});
const view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: {
x: 128.0522605138008, //Longitude
y: 41.847540077153155, //Latitude
z: 9260 //Meters
},
}
});
运行应用程序
在 CodePen 中，运行代码以显示地图。
场景视图应显示长白山的地形底图图层和高程图层。
下一步是什么？
要了解如何使用其他 API 功能，请参阅以下教程：