尝试一下在线预览本教程将引导您了解如何在 3D 场景视图中创建简单的地图。
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 SceneView - Create a 3D 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/SceneView - 加载允许以 3D 形式查看地图的代码
1
2
3
4
5
<script>
require([ "geoscene/Map", "geoscene/views/SceneView" ], (Map, SceneView) => {
// 创建地图和视图的代码将在这里
});
</script>
在构建简单页面或进行实验时，将 JavaScript 放入脚本标记中很有用，但不适用于大型应用程序。在构建更大的应用程序时，所有 JavaScript 都应该位于单独的 .js 文件中。
全局require() 函数用于加载 API 和 AMD 模块。要了解有关 API 不同模块的更多信息，请访问工具简介指南页面。
3. 创建地图
使用 Map 创建一个新地图，它是对从 geoscene/Map 模块加载的 Map 类的引用。 您可以通过将对象传递给 Map 构造函数来指定地图属性，例如底图 basemap 和 'ground。
1
2
3
4
5
6
require(["geoscene/Map", "geoscene/views/SceneView"], (Map, SceneView) => {
const map = new Map({
basemap: "topo-vector",
ground: "world-elevation"
});
});
其他底图选项包括： satellite、hybrid、 gray-vector、geoscene-blue、oceans、tianditu-vector, osm、national-geographic、geoscene-blue。通过修改 sandbox 中的 basemap 选项来使用备用底图。查看 Map 类 以获取有关其他地图选项的更多详细信息。
'Map' 的 'ground' 属性指定地图的表面属性。仅在将地图添加到 3D SceneView 时才相关。字符串 “world-elevation” 指定使用 World Elevation Service 的地面实例。
4. 创建 3D 视图
查看用作 HTML 文件中容器的引用节点，允许用户查看 HTML 页面内的地图。创建一个新的 SceneView 并通过将一个对象传递给它的构造函数来设置它的属性：
1
2
3
4
5
6
7
8
9
10
require(["geoscene/Map", "geoscene/views/SceneView"], (Map, SceneView) => {
const map = new Map({
basemap: "topo-vector",
ground: "world-elevation"
});
const view = new SceneView({
container: "viewDiv", // 对包含视图的 DOM 节点的引用
map: map // 引用在步骤 3 中创建的地图对象
});
});
在这个片段中，我们将 container 属性设置为将保存地图的 DOM 节点的名称，在这种情况下，我们使用 <div> 元素的 id 属性。 map 属性引用了我们在上一步中创建的地图对象。 有关您可以在视图上设置的其他属性（包括 center 和 scale），请参阅 SceneView documentation 文档，这些属性可用于定义视图的初始范围。
有两种可用的视图：MapView（用于查看 2D 地图）和 SceneView（用于查看 3D 地图）。点击此处了解有关使用 2D 视图创建地图的更多信息。
5. 定义页面内容
现在创建地图和视图所需的 JavaScript 已经完成！ 下一步是添加关联的 HTML 以查看地图。 对于这个例子，HTML 非常简单：添加一个 <body> 标记，它定义了在浏览器中可见的内容，并在 body 中添加一个单独的 <div> 元素，视图将在其中创建。
1
2
3
<body>
<div id="viewDiv"></div>
</body>
<div> 的 id “viewDiv”，以匹配在构造函数中传递给 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 构建了您的第一个 3D 网络应用程序！ 您的最终 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Intro to SceneView - Create a 3D 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/SceneView"], (Map, SceneView) => {
const map = new Map({
basemap: "topo-vector",
ground: "world-elevation"
});
const view = new SceneView({
container: "viewDiv", // 引用第 5 步中创建的场景 div
map: map, // 引用在场景之前创建的地图对象
scale: 50000000, // 将初始比例设置为 1:50,000,000
center: [-101.17, 21.78] // 用 lon/lat 设置中心点
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>