了解如何创建和显示具有底图图层和高程的场景。
场景由底图图层和数据图层构成，它支持三维地理数据图层。场景能实现真实世界中景观、实体、建筑物和其他 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.27/geoscene/themes/light/main.css">
<script src="https://js.geoscene.cn/4.27/"></script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
添加模块
GeoScene Maps SDK for JavaScript 提供了 AMD 模块和 ES 模块，本教程中我们是以 AMD 为例。指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。
在HTML中添加 <script> 标签和 require 语句，加载 Map 和 SceneView 模块。或者直接在CodePen > JS 面板中添加 JavaScript 代码。添加时，删除示例代码的 <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.27/geoscene/themes/light/main.css">
<script src="https://js.geoscene.cn/4.27/"></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。
创建 Map 并将 basemap 属性设置为 tianditu-image，将 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-image", //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-image", //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
},
tilt: 65
}
});
运行应用程序
在 CodePen 中，运行代码以显示地图。
场景视图应显示长白山的地形底图图层和高程图层。
下一步是什么？
要了解如何使用其他 API 功能，请参阅以下教程：