尝试一下在线预览本教程将引导您了解如何在 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>