显示具有
底图图层和
高程的
场景。
Pan, zoom, tilt, and rotate the scene to explore.
场景包含3D 显示的地理数据图层。场景支持显示景观、实体、建筑物和其他 3D 对象。场景通过场景视图来显示，包括底图图层和数据图层，另外通过场景视图还可以控制视图的中心位置、倾斜和角度。
在本教程中，将使用地形底图图层和世界高程图层创建并显示长白山的场景。
步骤
创建新 Pen
- 转至 CodePen，为您的制图应用程序创建新 Pen。
添加 HTML
定义 HTML 页面以创建一个场景，该场景使用浏览器窗口的全宽度和高度。
在 CodePen > HTML 中，添加 HTML 和 CSS 来为场景创建一个带有 viewDiv 元素的页面。
HTML 将创建一个具有页面全宽和全高的场景。viewDiv 是显示场景的元素，其 CSS 设置了它可以使用浏览器的完整宽度和高度。
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.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 API for JavaScript Tutorials: 显示 Web 场景</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style></head>
<body>
<div id="viewDiv"></div>
</body>
</html>
引用 API
在 <head> 标签中，添加API的 CSS 文件和 JS 库的引用。
Add line.Add line.Add line.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 API for JavaScript Tutorials: 显示 Web 场景</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
<script src="https://js.geoscene.cn/4.23/"></script></head>
<body>
<div id="viewDiv"></div>
</body>
</html>
添加模块
GeoScene JS API 包含 AMD 模块。在 require 语句中引用 Map 和 SceneView 模块。
添加 <script> 标签和 AMD require 语句以加载 Map 和 SceneView 模块。
如果将 JavaScript 代码添加到 CodePen > JS 面板而不是 HTML 面板。需移除 <script> 标记。
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.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 API for JavaScript Tutorials: 显示 Web 场景</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
<script src="https://js.geoscene.cn/4.23/"></script>
<script>
require([
"geoscene/config",
"geoscene/Map",
"geoscene/views/SceneView"
], function(geosceneConfig,Map, SceneView) {
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
获取 API 秘钥
访问 GeoScene 服务需要 API 秘钥。
- 转至开发人员仪表盘以获取 API 秘钥。
- 复制秘钥，因其将在下一步中使用。
创建场景
使用 Map 定义底图图层和高程表面。场景使用高程图层中的信息来确定地图中渲染的 ground (表面) 高度。
返回至 CodePen。
创建 Map 并将 basemap 属性设置为 tianditu-vector，并将 ground 属性设置为 world-elevation。
Add line.Add line.Add line.Add line.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 API for JavaScript Tutorials: 显示 Web 场景</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
<script src="https://js.geoscene.cn/4.23/"></script>
<script>
require([
"geoscene/config",
"geoscene/Map",
"geoscene/views/SceneView"
], function(geosceneConfig,Map, SceneView) { geosceneConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
basemap: "tianditu-vector", //底图图层服务
ground: "world-elevation", //高程服务
}); });
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
创建场景视图
使用 SceneView 类以设置要绘制的 map 和图层，并定义相机位置。camera 是确定 SceneView 可见范围的点。tilt 属性指相机指向的表面的角度数。
创建 SceneView。设置 container、map 和 camera 属性。
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.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 API for JavaScript Tutorials: 显示 Web 场景</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
<script src="https://js.geoscene.cn/4.23/"></script>
<script>
require([
"geoscene/config",
"geoscene/Map",
"geoscene/views/SceneView"
], function(geosceneConfig,Map, SceneView) {
geosceneConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
basemap: "tianditu-vector", //底图图层服务
ground: "world-elevation", //高程服务
});
const view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: {
x: 128.0522605138008, //经度
y: 41.847540077153155, //纬度
z: 9260 //米
},
tilt: 65
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
运行应用程序
在 CodePen 中，运行代码以显示地图。
场景视图应显示长白山的地形底图图层和高程图层。
下一步是什么？
要了解如何使用其他 API，请参阅以下教程：