ArcGIS官方文檔：https://developers.arcgis.com/javascript/
第一章、認識和使用ArcGIS
1 ArcGIS for js 4.x
使用的是4.15 版本,ArcGIS 每個版本之間有差別，3 和4 的差別有點大
4 地圖可以2D或3D顯示，修改了繪圖邏輯，地圖和圖層不在處理邏輯，而是由view處理視圖專門用於可視化地圖或場景中的 數據。地圖包含要顯示的實際數據或圖層，而視圖則處理顯示的數據。
4.x多了MapView,地圖在MapView中顯示：
var map = new Map({ basemap: "streets" });
var view = new MapView({
container: "viewDiv",
map: map,
center:[118.183013,39.638808], zoom: 6 });
map = new Map("map", {
center:[118.183013,39.638808],
zoom: 13 ,
minZoom: 4,
maxZoom: 11 });
所有map的相關操作都轉換到了view
圖層操作方法有些改變：
3.x
map.addLayer(pointGraphicLayer, 20); map.removeLayer(pointGraphicLayer);
4.x
map.add(graphicsLayer) map.remove(graphicsLayer);
有些類可以不用引入，直接使用：
var point = { type: "point", longitude: 118.183013, latitude: 39.638808 };
var simpleFillSymbol = { type: "simple-fill",
color: [227, 139, 79, 0.8],
opacity 80% outline: { color: [255, 255, 0], width: 1 }
};
var point = new Point(118.183013,39.638808);
var simpleFillSymbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NONE,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([148, 236, 60]),2),
new Color([255, 255, 179, 0]));
var polygon =new Polygon ( [118.183013, 39.638808],
[118.333013, 39.828808],
[118.543013, 39.878808] );
模塊和軟件包更新：
更改的軟件包名稱，例如esri/dijitnow esri/widgets/。
短，更清晰的模塊名稱，例如TileLayer代替ArcGISTiledMapServiceLayer。
一貫套管模塊名，所有模塊現在有一個大寫字母，含開始Map，Graphic和Query。
支持類已移至支持文件夾，以使API參考更加有條理，例如esri/layers/support和esri/tasks/support。
結構發生了esri/config變化。的屬性esriConfig.defaults現在位於中esriConfig。例如，要設置默認幾何服務
5.popupTemplate 新版本不再有infowwindow 了
2 創建應用
1.創建HTML頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ArcGIS JavaScript APP</title>
<style>
html, body, #viewDiv {
padding: 0; margin: 0;height: 100%;width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
2.添加對CSS和API的引用
該<script>標籤加載從CDN通過ArcGIS API爲JavaScript。發行新版本的API後，請更新版本號以匹配新發行的版本
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
3.加載模塊
esri/Map -加載特定於創建地圖的代碼
esri/views/MapView -加載允許以2D模式查看地圖的代碼
使用第二個<script>標籤從API加載特定的模塊。使用以下代碼段中的語法加載以下模塊
esri/Map -加載特定於創建地圖的代碼 esri/views/MapView -加載允許以2D模式查看地圖的代碼
require([ "esri/Map", "esri/views/MapView" ],
function(Map, MapView) {});
全局require()函數（由dojo提供）用於加載模塊，Esri的JavaScript API構建在Dojo之上，以利用Dojo的模塊化代碼庫以及協調跨瀏覽器差異的能力。
4.創建地圖
使用新建一個地圖Map，該地圖是對從esri/Map模塊加載的Map類的引用。您可以basemap通過將一個對象傳遞給Map構造函數來指定地圖屬性
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});
});
其他底圖的選項有：satellite，hybrid，topo，gray，dark-gray，oceans，osm，national-geographic。
5 創建2D地圖還是3D場景
在中<head>，添加<script>標籤和AMD require語句以加載Map和MapView或SceneView模塊。創建一個新的Map並將basemap屬性設置爲topo-vector。如果要創建3D場景，請將該ground屬性設置爲world-elevation顯示高程變化。最後，按照以下步驟之一創建適當的視圖：
2D地圖：
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80500, 34.02700], // longitude, latitude
zoom: 13
});
});
</script>
3D場景：
<script>
require([
"esri/Map",
"esri/views/SceneView"
], function(Map, SceneView) {
var map = new Map({
basemap: "topo-vector",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: {
x: -118.80800,
y: 33.96100,
z: 25000
},
tilt: 65
}
});
});
</script>
3 底圖
在應用程序中使用的各種各樣的底圖。其中許多可以直接用字符串常量引用。
底圖屬性light-gray-vector，dark-gray-vector，satellite，streets-relief-vector，和streets-navigation-vector
var map = new Map({basemap: "streets-navigation-vector"});
底圖的選項有：streets,satellite，hybrid，topo，gray，dark-gray，oceans，osm，national-geographic。
構建應用程序以交互方式選擇和顯示ArcGIS Online 底圖：
要構建可以在底圖之間切換的應用程序，可以使用BasemapToggle或BasemapGallery窗口小部件。
該BasemapToggle小部件允許您在定義的兩個底圖之間切換，
而BasemapGallery小部件允許您從屬於ArcGIS Online組的多個底圖中進行選擇。您可以使用Esri託管的一組底圖，也可以使用專門爲應用程序組成的一組底圖
示例1：切換底圖：
啓用兩個底圖之間的選擇的最簡單方法之一是使用BasemapToggle小部件。在此步驟中，您將配置窗口小部件以在“地形”底圖和“衛星”底圖之間切換。
//require語句中，添加對BasemapToggle和BasemapGallery模塊的引用
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery"
], function(Map, MapView, BasemapToggle, BasemapGallery) {
在main中的代碼結尾處function，創建一個BasemapToggle小部件將view和nextBasemap屬性設置爲satellite
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "satellite"
});
// 然後將小部件添加到視圖的，將其添加到視圖的右下角DefaultUI。
view.ui.add(basemapToggle, "bottom-right");
示例2：從ArcGIS Online 組中選擇底圖：
選擇底圖的另一種方法是使用BasemapGallery小部件。在此步驟中，您將使用小部件從ArcGIS Online組中加載底圖，以便用戶可以選擇和顯示底圖。
在main中function，創建一個BasemapGallery小部件並將其配置爲從中加載底圖ArcGIS Online。將設置view爲活動視圖，並將設置source爲ArcGIS Online門戶。將設置url爲https://wwww.arcgis.com並將其設置useVectorBasemaps爲，true以便從矢量圖塊組中加載底圖。如果將此值設置爲該值，false將加載柵格圖塊底圖組
var basemapGallery = new BasemapGallery({
view: view,
source: {
portal: {
url: "https://www.arcgis.com",
useVectorBasemaps: true
}
}
});
通過將小部件添加到視圖的，將其添加到視圖的右上角DefaultUI
view.ui.add(basemapGallery, "top-right");