（2）ArcGIS API for JavaScript之Hello 3D World

阅读本文大概需要 5 分钟。

ArcGIS API for JavaScript 目前有两个大的版本：3.X 和 4.X，其中 3.X 用于开发二维的 WebGIS 应用，4.X 用于开发二三维一体化的 WebGIS 应用。

虽然 Esri 目前都还在维护两个版本，但未来某一天应该会放弃 3.X 版本的，毕竟二三维一体化是趋势。所以，建议直接上手 4.X 版本。

上一篇文章使用 MapView 类，完成了一个简单的二维 WebGIS。本篇文章要开发一个简单的三维 WebGIS，使用的类是 SceneView。

1.新建一个 HTML 文档

使用熟悉的代码编辑器新建一个 HTML 文档，输入以下代码，并保存为 hello_3d_world.html。

2.添加css、js的引用

在 head 标签中加入 ArcGIS API for JavaScript 的 css 和 js 的引用：

3.添加地图显示容器 div

在 body 中增加一个 div 标签，用于显示地图：

4.设置网页、地图视图样式

在 head 标签中，设置网页、地图显示 div 的样式，将地图显示 div 的大小设置为网页的大小, 内外边距都设置为0：

注意，一定要设置 viewDiv 的 width 和 height，否则地图不会显示。

5.加载 API 模块

在 head 中写 js 代码，先加载用到的 API 模块：

6.添加地图

模块加载完成后，在执行的回调函数创建 SceneView, 设置三维地图、三维地图显示容器 div、地图缩放级别，显示范围中心等。

SceneView 的 「container」属性对应着之前我们的地图显示容器 div 的 id。注意，id 前不用加「#」。

「map」 属性是一个 Map 类，其中 basemap 为地图，ground 为要使用的地面，简单理解就是设置地球表面的起伏。

PS：你也可以和前面一篇你文章一样，先新建一个 MapView 并赋值给 map 变量，再将 SceneView 的 map 属性设置为 map 变量。另外还有一种写法，先新建一个不带参数的 SceneView， 之后分别设置其属性，如:

具体使用哪一种风格，完全看你的喜好。不过，项目中一般都会混用，在构造函数中会定义一些已经确定的属性，在后面的代码中可能会根据需要动态调整某些属性。

7.预览