尝试一下在线预览本教程将引导您了解如何在 2D MapView 中创建简单地图。
1. 参考 GeoScene API for JavaScript
首先,设置一个类似于以下示例的基本 HTML 文档:
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Intro to MapView - Create a 2D map</title>
</head>
</html>
在 <head>
标签内,使用 <script>
和 <link>
标签引用 GeoScene API for JavaScript:
1
2
<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>
标签从 CDN 加载 GeoScene API for JavaScript。 当 API 的新版本发布时,更新版本号以匹配新发布的版本。
<link>
标记引用 main.css
样式表,其中包含特定于 Esri 小部件和组件的样式。
2. 加载模块
使用第二个 <script>
标记从 API 加载特定模块。使用以下代码段中的语法加载以下模块:
geoscene/Map
- 加载特定于创建地图的代码geoscene/views/MapView
- 加载允许在 2D 中查看地图的代码
1
2
3
4
5
<script>
require([ "geoscene/Map", "geoscene/views/MapView" ], (Map, MapView) => {
// 创建地图和视图的代码将在这里
});
</script>
在构建简单页面或进行实验时,将 JavaScript 放入脚本标记中很有用,但不适用于大型应用程序。在构建更大的应用程序时,所有 JavaScript 都应该位于单独的 .js
文件中。
全局 require()
函数用于加载 API 的 AMD 模块。要了解有关 API 不同模块的更多信息,请访问工具简介指南页面。
3. 创建地图
使用 Map
创建一个新地图,它是对从 geoscene/Map 模块加载的 Map 类的引用。 您可以通过将对象传递给 Map 构造函数来指定地图属性,例如 basemap
。
1
2
3
4
5
require(["geoscene/Map", "geoscene/views/MapView"], (Map, MapView) => {
const map = new Map({
basemap: "topo-vector"
});
});
其他底图选项包括: satellite
、hybrid
, gray-vector
、geoscene-blue
、oceans
、tianditu-vector
、osm
、national-geographic
、geoscene-blue
。通过修改 sandbox 中的 basemap
选项来使用备用底图。查看 Map 类以获取有关其他地图选项的更多详细信息。
4. 创建 2D 视图
查看用作 HTML 文件中容器的引用节点,允许用户查看 HTML 页面内的地图。创建一个新的 MapView
并通过将对象传递给它的构造函数来设置它的属性:
1
2
3
4
5
6
7
8
9
10
require(["geoscene/Map", "geoscene/views/MapView"], (Map, MapView) => {
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv", // 对包含视图的 DOM 节点的引用
map: map // 引用在步骤 3 中创建的地图对象
});
});
在这个片段中,我们将 container
属性设置为将保存地图的 DOM 节点的名称,在这种情况下,我们使用 <div>
元素的 id
属性。 map
属性引用了我们在上一步中创建的地图对象。有关您可以在视图上设置的其他属性(包括 center
和 zoom
),请参阅 MapView documentation 文档,这些属性可用于定义视图的初始范围。
有两种可用的视图:MapView(用于查看 2D 地图)和 SceneView(用于查看 3D 地图)。单击此处了解有关使用 3D 视图创建地图的更多信息。
5. 定义页面内容
现在创建地图和视图所需的 JavaScript 已经完成! 下一步是添加关联的 HTML 以查看地图。 对于这个例子,HTML 非常简单:添加一个 <body>
标记,它定义了在浏览器中可见的内容,并在 body 中添加一个单独的 <div>
元素,视图将在其中创建。
1
2
3
<body>
<div id="viewDiv"></div>
</body>
The <div>
的 id
为“viewDiv”,以匹配在构造函数中传递给 MapView container
属性的 id
。
6. 设置页面样式
使用 <head>
中的 <style>
标签设置页面内容的样式。要使地图填满浏览器窗口,请在页面的 <style> 中添加以下 CSS:
1
2
3
4
5
6
7
8
9
10
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
您现在已经使用 GeoScene API for JavaScript 4.0 构建了您的第一个 2D 网络应用程序!您的最终 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Intro to MapView - Create a 2D map</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/Map", "geoscene/views/MapView"], (Map, MapView) => {
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv", // 引用第 5 步中创建的视图 div
map: map, // 引用在视图之前创建的地图对象
zoom: 4, // 根据细节级别 (LOD) 设置缩放级别
center: [15, 65] // 使用经度、纬度设置中心点
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>