了解如何创建和显示包括底图图层的地图。
地图由地理数据图层组成。地图包含一个底图图层，以及一个或多个数据图层。您可使用地图视图并设置位置和缩放级别来显示地图的指定区域。
本教程介绍了如何使用矢量底图图层创建和显示地图。
本教程中的地图和代码可用作其他 2D 教程的起点。
步骤
创建新 Pen
- 转至 CodePen，为您的制图应用程序创建新 Pen。
添加 HTML
定义 HTML 页面以创建一个地图，该地图使用 Web 浏览器窗口的全宽度和高度。
在 CodePen > HTML 中，添加 HTML 和 CSS 来创建一个带有 viewDiv 元素的页面。viewDiv 元素用于显示地图，其 CSS 可重置任何浏览器设置，因此它可以使用浏览器的全宽度和高度。
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.25/geoscene/themes/light/main.css">
<script src="https://js.geoscene.cn/4.25/"></script>
添加模块
GeoScene Maps SDK for JavaScript 提供有 AMD 模块和 ES 模块，但本教程基于 AMD。AMD require 函数使用引用来确定加载哪些模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。
在 <head> 标签中，添加 <script> 标签和 require 语句以加载 Map 和 MapView 模块。您还可将 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
<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/MapView"], function(geosceneConfig, Map, MapView) {
});
</script>
创建地图
使用 Map 设置底图图层并应用API 密钥。
返回至 CodePen。
在 require 语句中，创建新的 Map 并将 basemap 属性设置为 tianditu-vector。要启用对 Basemap 图层服务的访问，请设置 Map 的 apiKey() 属性。
添加行。添加行。添加行。添加行。添加行。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) {
geosceneConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
basemap: "tianditu-vector" // Basemap layer service
});
创建地图视图
使用 MapView 类来设置要显示的地图位置。
创建 MapView 并设置 map 属性。要居中地图视图，请将 center 属性设置为 116, 39，并将 zoom 属性设置为 5。将 container 属性设置为 viewDiv 以显示地图的内容。
MapView 显示地图的内容。center 和 zoom 属性可确定地图的位置以及加载地图时显示的缩放级别。
zoom 属性可设置地图的缩放级别。值的范围通常介于 0-20 之间：0 表示离地球表面最远，20 表示最接近。某些底图图层可支持其他缩放级别，最高可达 1:23。
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
geosceneConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
basemap: "tianditu-vector" // Basemap layer service
});
const view = new MapView({
map: map,
center: [116, 39], // Longitude, latitude
zoom: 5, // Zoom level
container: "viewDiv" // Div element
});
运行应用程序
在 CodePen 中，运行代码以显示地图。
该地图应显示以北京为中心的矢量底图图层。
下一步是什么？
要了解如何使用其他 API 功能，请参阅以下教程：