【官方文檔：https://developers.arcgis.com/javascript/latest/sample-code/index.html】
一、Intro to MapView(2D)
在自己的HTML界面中創建並顯示一個2D地圖。
1.引入ArcGIS API for JavaScript
①編寫HTML骨架
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- 移動端優化 --> 6 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 7 <title>Intro to MapView - Create a 2D map</title> 8 </head> 9 10 <body> 11 </body> 12 </html>
②在<head>標簽中，使用<script>和<link>標簽引入JS API
1 <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> 2 <script src="https://js.arcgis.com/4.8/"></script>
注：部署JS API有兩種方式，本地部署或者在線引用。上面的例子是使用在線的API，當API版本更新或者想使用其他版本的API時，只需要更改其中的4.x數字。如果在線API加載緩慢，請刷新或者耐心等候。
2.導入模塊(modules)
從API中導入所需要的模塊。
1 <script> 2 require([ 3 "esri/Map", 4 "esri/views/MapView", 5 "dojo/domReady!" 6 ],function(Map,MapView){ 7 // 要編寫的代碼 8 }); 9 </script>
這里的<script>標簽還是寫在<head>標簽里，也可以寫在外部的.js文件里，在<script>中引入。
Esri的JavaScript API是建立在Dojo框架之上的，require()是Dojo中的一個方法，用於導入模塊。這里"esri/Map"，"esri/views/MapView"，"dojo/domReady!"就是3個不同的模塊，相當於C語言中的#include<stdio.h>，C++中的#include<iostream>,C#中的using System。有了這些模塊，才能使用其中的類。
這里，"esri/Map"是關於創建地圖的模塊，"esri/views/MapView"是關於以2D方式顯示地圖的模塊，"dojo/domReady!"確保在執行代碼前DOM是准備好的。關於dojo的相關信息，請參考https://developers.arcgis.com/javascript/3/jshelp/inside_dojo.html，https://developers.arcgis.com/javascript/3/jshelp/why_dojo.html。
這段代碼的寫法很奇怪，所有的代碼都是寫在require()中的。在這里，有兩個參數。第一個是需要導入的模塊數組，["module1","module2","module3",...,"module n"]。第二個參數是代碼的關鍵部分，是一個匿名函數。需要實現的業務功能都要寫在這個匿名函數的函數體中。函數需要參數，參數是下文中需要用到的類(class)，而使用這些類的前提是在前面已經導入了相應的模塊。function(class1,class2,...,class n){ //to do }。
要習慣這種奇怪的寫法，注意括號的匹配。
3.創建地圖
這里需要先知道兩個很重要的概念，Map和View。前面導入的兩個模塊"esri/Map"和"esri/views/MapView"就是為了提供這兩個類的。
Map創建地圖的內容，它決定要創建什么樣的地圖，顯示什么內容。View是顯示地圖的窗口，Map只是創建了地圖，有這個東西，但是如果要在HTML頁面中顯示，還是要通過View。舉個例子，如果畫一幅畫，我知道要畫些什么，就是我知道Map是什么。但是畫在哪里，是紙上、竹子上、黑板上還是哪里，就是View決定的。
1 <script> 2 require([ 3 "esri/Map", 4 "esri/views/MapView", 5 "dojo/domReady!" 6 ],function(Map,MapView){ 7 var map=new Map({ 8 basemap:"streets" 9 }); 10 }); 11</script>
這里，var map=new Map()創建一個Map對象。在構造函數中傳入相關參數以設置Map實例的屬性。這些參數要放在大括號{}中。這種構造函數的寫法也很奇怪，要適應。
basemap是Map類的一個屬性，決定了創建什么樣子的地圖，其他的選擇還有：satellite,hybrid,topo,gray,dark-gray,oceans,osm,national-geographic。接觸到Layer圖層的知識后，basemap還可以是自己發布的地圖服務等等。也可以是portal、ArcGIS Online里WebMap的id引用。
關於Map的其他屬性，請查看參考文檔：https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html。
可以使用Esri提供的沙盒(Sandbox)功能在線編輯查看：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=intro-mapview。
4.創建2D視圖(view)
view是顯示地圖的窗口，但是view還是要寄托在HTML<div>標簽上的，相當於<div>是view的一個載體，要不然view怎么知道在哪里顯示呢？
1 <body> 2 <div id="viewDiv"></div> 3</body>
要注意這里的id，后面會用到。
1 <script> 2 require([ 3 "esri/Map", 4 "esri/views/MapView", 5 "dojo/domReady!" 6 ],function(Map,MapView){ 7 // 創建地圖map 8 var map=new Map({ 9 basemap:"streets" 10 }); 11 12 // 創建視圖view 13 var view=new MapView({ 14 container:"viewDiv", // 對應div載體，viewDiv是其id 15 map:map, // 要顯示的地圖,前一個map是屬性名，后一個map是前面創建的地圖實例 16 center:[117,34], // 地圖顯示中心 17 zoom:4 // 縮放級別 18 }); 19 }); 20</script>
這里，container和map都是MapView的屬性。"viewDiv"是那個載體的id，map是前面創建的地圖實例。
關於MapView的其他屬性，請查看MapView的參考文檔：https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html。
5.配置頁面樣式(style)
為了正確顯示，設置頁面css。
1 <style> 2html,body,#viewDiv{ 3 padding:0; 4 margin:0; 5 height:100%; 6 width:100%; 7 } 8</style>
6.最終代碼及運行效果
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- 移動端優化 --> 6 <meta name="viewport" content="initial-scale=1,maximun-scale=1,user-scalable=no"> 7 <title>Intro to MapView - Create a 2D map</title> 8 9 <!-- JS API的引入 --> 10 <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> 11 <script src="https://js.arcgis.com/4.8/"></script> 12 13 <script> 14 require([ 15 "esri/Map", 16 "esri/views/MapView", 17 "dojo/domReady!" 18 ],function(Map,MapView){ 19 // 創建地圖map 20 var map=new Map({ 21 basemap:"streets" 22 }); 23 24 // 創建視圖view 25 var view=new MapView({ 26 container:"viewDiv", // 對應div載體，viewDiv是其id 27 map:map, // 要顯示的地圖,前一個map是屬性名，后一個map是前面創建的地圖實例 28 center:[117,34], // 地圖顯示中心 29 zoom:4 // 縮放級別 30 }); 31 }); 32 </script> 33 34 <style> 35 html,body,#viewDiv{ 36 padding:0; 37 margin:0; 38 height:100%; 39 width:100%; 40 } 41 </style> 42 </head> 43 44 <body> 45 <div id="viewDiv"></div> 46 </body> 47 </html>
二、Intro to SceneView(3D)
在自己的HTML頁面中創建並顯示一個3D地圖（地球）。
顯示3D地圖與顯示2D地圖類似。
1.骨架代碼
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 6 <title>Intro to SceneView - Create a 3D map</title> 7 8 <!-- 引入JS API --> 9 <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> 10 <script src="https://js.arcgis.com/4.8/"></script> 11 12 <script> 13 require([ 14 "esri/Map", 15 "esri/views/SceneView", // 變動1 16 "dojo/domReady!" 17 ],function(Map,SceneView){ 18 // 創建地圖 19 var map=new Map({ 20 }); 21 22 //創建視圖 23 var view=new SceneView({ // 變動2 24 }); 25 }); 26 </script> 27 28 <style> 29 html,body,#viewDiv{ 30 padding:0; 31 margin:0; 32 height:100%; 33 width:100%; 34 } 35 </style> 36 </head> 37 38 <body> 39 <div id="viewDiv"></div> 40 </body> 41 </html>
相比較顯示2D地圖，這里有兩處變動。第一個變動是引入的視圖模塊，2D地圖是"esri/views/MapView",而3D地圖是"esri/views/SceneView"。第二個變動是function()中的類，2D地圖是MapView，而3D地圖是SceneView。也就是說MapView是承載2D地圖的視圖，而SceneView是承載3D地圖的視圖。Scene是場景的意思，即3D地圖。
2.Map和SceneView代碼
需要設置的屬性和2D地圖差不多，但也有不一樣的地方。
1 var map=new Map({ 2 basemap:"streets", 3 ground:"world-elevation" // 3D地圖需要設置這個屬性 4 }); 5 6 //創建視圖 7 var view=new SceneView({ // 變動2 8 container:"viewDiv", 9 map:map, 10 scale:50000000, //設置初始比例尺為 1:50,000,000 11 center:[117,34] 12 });
ground屬性用於設置3D地圖的地面屬性(surface properties)，只在創建3D地圖時設置。這里設置為"world-elevation"，設置了一個使用World Elevation Service的地面實例(ground instance)。
3.最終代碼及運行效果
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 6 <title>Intro to SceneView - Create a 3D map</title> 7 8 <!-- 引入JS API --> 9 <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> 10 <script src="https://js.arcgis.com/4.8/"></script> 11 12 <script> 13 require([ 14 "esri/Map", 15 "esri/views/SceneView", // 變動1 16 "dojo/domReady!" 17 ],function(Map,SceneView){ 18 // 創建地圖 19 var map=new Map({ 20 basemap:"streets", 21 ground:"world-elevation" // 3D地圖需要設置這個屬性 22 }); 23 24 //創建視圖 25 var view=new SceneView({ // 變動2 26 container:"viewDiv", 27 map:map, 28 scale:50000000, //設置初始比例尺為 1:50,000,000 29 center:[117,34] 30 }); 31 }); 32 </script> 33 34 <style> 35 html,body,#viewDiv{ 36 padding:0; 37 margin:0; 38 height:100%; 39 width:100%; 40 } 41 </style> 42 </head> 43 44 <body> 45 <div id="viewDiv"></div> 46 </body> 47 </html>
【推薦文章：秋意正寒https://www.cnblogs.com/onsummer/p/9080463.html，https://www.cnblogs.com/onsummer/p/9085273.html】