了解如何创建和显示包括底图图层的地图。
地图由地理数据图层组成。地图包含一个底图图层，以及一个或多个数据图层。地图的位置、缩放级别和显示范围通过地图视图设置。
本教程介绍了如何使用矢量底图图层创建和显示地图。
本教程中的地图和代码可用作其他 2D 教程的基础。
步骤
创建新 Pen
- 打开 CodePen，新建一个用于制图应用程序的 Pen。
添加 HTML
定义 HTML 内容，创建一个地图，该地图的宽高分别为 Web 浏览器窗口的宽度和高度。
在 CodePen > HTML 中，添加 HTML 和 CSS，创建一个包含 viewDiv 元素的页面。viewDiv 元素用于显示地图，设置它的宽度和高度分别为浏览器的全宽度和高度。
CodePen 中是不需要输入 <!DOCTYPE html> 标签的。但如果您要在其他编辑器或是本地服务器上运行页面，需要手动在 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
<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 map</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
<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>
添加模块
GeoScene Maps SDK for JavaScript 提供了 AMD 模块和 ES 模块，本教程中我们是以 AMD 为例。AMD 使用require 函数加载模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持引用模块和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。
在HTML <head> 标签中，添加 <script> 标签和 require 语句，加载 Map 和 MapView 模块。或者直接在 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
<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/MapView"], function(geosceneConfig, Map, MapView) {
});
</script>
创建地图
定义 Map， 设置底图图层。
返回至 CodePen。
- 创建
Map 对象，设置其 basemap 属性值为 tianditu-vector。
Expand
Use dark colors for code blocks
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
<script>
require(["geoscene/config", "geoscene/Map", "geoscene/views/MapView"], function(geosceneConfig, Map, MapView) {
const map = new Map({
basemap: "tianditu-vector" // Basemap layer service
});
创建地图视图
定义 MapView 类，设置地图及其显示范围。
新建 MapView ，设置其 map 属性值为上一步创建的 Map 对象。设置视图中心点和地图显示比例， center 属性设置为 111.4,37.9，zoom 属性设置为 4。container 属性设置为 viewDiv ，保存刷新则可显示地图。
MapView 对象控制地图显示。center 和 zoom 用来确定地图的位置和加载时显示的缩放级别。
zoom 值的范围通常介于 0-20 之间：0 表示离地球表面最远，20 表示最接近。
MapView 还支持许多事件，比如 click 和 double-click。通过这些事件可以更改地图的位置、查找图层中的要素。
添加行。添加行。添加行。添加行。添加行。添加行。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
const map = new Map({
basemap: "tianditu-vector" // Basemap layer service
});
const view = new MapView({
map: map,
center: [111.4, 37.9], // Longitude, latitude
zoom: 4, // Zoom level
container: "viewDiv" // Div element
});
运行应用程序
在 CodePen 中，运行代码以显示地图。
该地图应显示以北京为中心的矢量底图图层。
下一步是什么？
要了解如何使用其他 API 功能，请参阅以下教程：