1.引用資源
首先跟創(chuàng)建2D地圖一樣，在head標(biāo)簽內(nèi)部，使用script和link標(biāo)簽引用ArcGIS API for JavaScript，代碼如下：
<link rel="stylesheet" >
<script src="https://js.arcgis.com/4.6/"></script>
同樣該script標(biāo)記從CDN加載ArcGIS API for JavaScript。當(dāng)新版本的API發(fā)布時(shí)，更新版本號(hào)以對(duì)應(yīng)新發(fā)布的版本。
該link標(biāo)簽引用main.css樣式表，其中包含特定于Esri窗口小部件和組件的樣式。
2.加載模塊
其中加載模塊中的內(nèi)容，跟創(chuàng)建2D地圖一樣，這里就不在累贅，可以參考前期的創(chuàng)建一個(gè)2D地圖的文章，代碼如下：
<script>
require([
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
], function(Map, SceneView) {
// Code to create the map and view will go here
});
</script>
esri/views/SceneView - 加載允許在3D中查看地圖的代碼
3.創(chuàng)建地圖
創(chuàng)建一個(gè)Map對(duì)象，它是從esri/Map模塊加載的Map類的引用。我們可以通過Map對(duì)象傳遞給構(gòu)造函數(shù)來指定地圖屬性，例如和“ground”。這里是設(shè)置地圖的屬性，比如說我們需要加載的底圖啊，地圖的地面屬性啊等等，而后面我們創(chuàng)建的3D視圖，是設(shè)置我們所看到地圖的樣子，可以設(shè)置顯示的中心位置，以及放大的級(jí)數(shù)等等。代碼如下：
require([
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
], function(Map, SceneView) {
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
});
其中basemap為加載的底圖，其他底圖的選項(xiàng)有：satellite，hybrid，topo，gray，dark-gray，oceans，osm，national-geographic。
ground指定地圖的表面屬性，字符串“world-elevation”使用世界高程服務(wù)指定地面的一個(gè)實(shí)例。
4.創(chuàng)建一個(gè)3D視圖
創(chuàng)建一個(gè)新的SceneView并通過傳遞一個(gè)對(duì)象給它的構(gòu)造函數(shù)來設(shè)置它的屬性：
代碼如下：
require([
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
], function(Map, SceneView) {
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv", // container為容器的意思，這里對(duì)將包含視圖的DOM節(jié)點(diǎn)的引用，就是承載地圖的div容器的id。
map: map // 引用我們?cè)谏弦徊街袆?chuàng)建的地圖對(duì)象
scale: 500000, // 設(shè)置顯示的比例尺的大小
center: [103.73, 36.03] // 設(shè)置中心顯示的經(jīng)緯度。這里設(shè)置的經(jīng)緯度為我們大蘭州，哈哈
});
});
5.定義頁面內(nèi)容
到此為止，創(chuàng)建地圖和視圖所需的JavaScript已經(jīng)完成了！下一步是添加關(guān)聯(lián)的HTML查看地圖。對(duì)于這個(gè)例子，HTML非常簡單：添加一個(gè)body標(biāo)簽，它定義了瀏覽器中可見的內(nèi)容，以及div在視圖創(chuàng)建的主體內(nèi)部的一個(gè)元素。
<body>
<div id="viewDiv"></div>
</body>
在div有“viewDiv”的ID匹配傳遞給SceneView的標(biāo)識(shí)container在constructor屬性。
6.樣式頁面
使用style標(biāo)簽中的標(biāo)簽來設(shè)置頁面的內(nèi)容head。要使地圖填充瀏覽器窗口，在頁面中添加以下CSS代碼：
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
最終，小伙伴們，我們成功利用ArcGIS API for JavaScript 4.6,構(gòu)建了第一個(gè)Web應(yīng)用程序，效果請(qǐng)戳下面鏈接http://jiegiser.win/arcgisAPI/creat3Dmap.html
最后整體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>SceneView - 創(chuàng)建一個(gè)3D地圖</title>
<style>
html,
body,
#viewDiv {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
<!--使用script和link標(biāo)簽引用ArcGIS API for JavaScript-->
<link rel="stylesheet" >
<script src="https://js.arcgis.com/4.6/"></script>
<script>
require(["esri/Map", "esri/views/SceneView", "dojo/domReady!"], function(Map, SceneView) {
var map = new Map({
basemap: "streets",
ground: "world-elevation" //ground指定地圖的表面屬性，字符串“world-elevation”使用世界高程服務(wù)指定地面的一個(gè)實(shí)例。
});
var view = new SceneView({
container: "viewDiv", // container為容器的意思，這里對(duì)將包含視圖的DOM節(jié)點(diǎn)的引用，就是承載地圖的div容器的id。
map: map, // 引用我們?cè)谏弦徊街袆?chuàng)建的地圖對(duì)象
scale: 500000, // 設(shè)置顯示的比例尺的大小
center: [103.73, 36.03] // 設(shè)置中心顯示的經(jīng)緯度。這里設(shè)置的經(jīng)緯度為我們大蘭州，哈哈
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
