了解如何基于 web 地图显示存储在 GeoScene 中的地图。
Web 地图作为项目存储在 GeoScene Online 中。Web 地图项目包含地图的所有配置信息 (JSON 格式)，如底图图层、数据图层、图层样式和弹出窗口设置。应用程序可以使用其项目 ID 访问和显示 Web 地图。
在本教程中，将加载并显示存储在 GeoSceneS Online 中的预配置 web 地图。
步骤
创建新 Pen
- 要开始使用，请完成显示地图教程 或 使用此 Pen。
添加模块
在 require 语句中，删除 Map 模块。添加 WebMap、ScaleBar 和 Legend 模块。
GeoScene Maps SDK for JavaScript 提供有 AMD 模块和 ES 模块，但本教程基于 AMD。AMD require 函数使用引用来确定加载哪些模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。
移除行添加行。添加行。添加行。更改行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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<script>
require([
"geoscene/config",
"geoscene/Map",
"geoscene/WebMap",
"geoscene/views/MapView",
"geoscene/widgets/ScaleBar",
"geoscene/widgets/Legend"
], function(geosceneConfig, WebMap, MapView, ScaleBar, Legend) {
加载 web 地图
可使用门户项目 ID 创建 WebMap。Web 地图将传递至视图。
删除创建 Map 的代码。
移除行移除行移除行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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
const map = new Map ({
basemap: "tianditu-vector" //Basemap layer service
});
创建 WebMap。将 portalItem ID 设置为 2a78a76e9a4144f9873355367ae76e26。
添加行。添加行。添加行。添加行。添加行。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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
const webmap = new WebMap({
portalItem: {
id: "2a78a76e9a4144f9873355367ae76e26"
}
});
使用 webmap 元素更新 MapView 中的 map 属性。移除 center 和 zoom 属性，因 Web 地图提供定位信息。
移除行移除行移除行更改行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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
const webmap = new WebMap({
portalItem: {
id: "2a78a76e9a4144f9873355367ae76e26"
}
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [116,39],
zoom: 5
map: webmap
});
在右上角，单击运行以验证 Web 地图是否已成功加载并显示。
使用 Legend 和 ScaleBar微件将多个上下文添加到应用程序中。Legend 微件可显示视图中可见图层的标注和符号。ScaleBar 可以以公制或非公制值显示单位。
创建 ScaleBar。将 scalebar 添加到 view 的 bottom-left 处。
添加行。添加行。添加行。添加行。添加行。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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
const view = new MapView({
container: "viewDiv",
map: webmap
});
const scalebar = new ScaleBar({
view: view
});
view.ui.add(scalebar, "bottom-left");
创建 Legend 以显示要素信息。将 legend 添加到 view 的 top-right 处。
添加行。添加行。添加行。添加行。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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
const scalebar = new ScaleBar({
view: view
});
view.ui.add(scalebar, "bottom-left");
const legend = new Legend ({
view: view
});
view.ui.add(legend, "top-right");
运行应用程序
在 CodePen 中，运行代码以显示地图。
现在，您将看到一个比例尺，以及一个显示 Web 地图所含图层信息的图例。
下一步是什么？
要了解如何使用其他 API 功能，请参阅以下教程：