Arcgis api for javascript(3.22版本)官方地址 ：https://developers.arcgis.com/javascript/3/
1. 根據官方示例實現一個簡單地圖展示功能。
示例代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css"> 5 <style type="text/css"> 6 html, body { margin: 0; padding: 0; height: 100%; width: 100%; } 7 #viewDiv{ width:100%;height:100%; } 8 </style> 9 <script src="https://js.arcgis.com/3.22/"></script> 10 </head> 11 <body> 12 <div id="viewDiv"></div> 13 <script type="text/javascript"> 14 require(["esri/map", "dojo/domReady!"], function(Map) { 15 var map = new Map("viewDiv", { 16 "basemap": "streets" 17 }); 18 }); 19 </script> 20 </body> 21 </html>
示例截圖：
2. Arcgis api for javascript離線部署
引用官網上的資源文件通常請求和加載比較慢，所以離線部署在本地會更好。
第一步：下載 arcgis js api壓縮包並解壓，有需要的也可以將arcgis js sdk也下載一份。api是我們開發需要的庫，sdk是說明文檔和例子；
第二步：替換域名 [HOSTNAME_AND_PATH_TO_JSAPI]；
找到下面這兩個文件，並將文件里面的“[HOSTNAME_AND_PATH_TO_JSAPI]”內容替換成相應的域名(ip地址:端口)
D:\arcgis_js_api\arcgis_js_v320_api\library\3.20\3.20\init.js
D:\arcgis_js_api\arcgis_js_v320_api\library\3.20\3.20\dojo\dojo.js
第三部：將該文件夾作為部署包在IIS或其他服務器進行發布，具體部署方法網上有很多教程；
部署成功后，只需將原來的css和js文件引用改成本地地址就可以了，如下圖所示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" href="http://localhost:8003/arcgis_js_v320_api/library/3.20/3.20/esri/css/esri.css"> 5 <style type="text/css"> 6 html, body { margin: 0; padding: 0; height: 100%; width: 100%; } 7 #viewDiv{ width:100%;height:100%; } 8 </style> 9 </head> 10 <body> 11 <div id="viewDiv"></div> 12 <script src="http://localhost:8003/arcgis_js_v320_api/library/3.20/3.20/init.js"></script> 13 <script type="text/javascript"> 14 require(["esri/map", "dojo/domReady!"], function(Map) { 15 var map = new Map("viewDiv", { 16 "basemap": "streets" 17 }); 18 }); 19 </script> 20 </body> 21 </html>
3. 示例代碼分析
- 創建一個id為"viewDiv"的div作為map對象渲染地圖的容器
<div id="viewDiv"></div>
- js在執行過程中可能會用到其他js文件，但是不需要自定義引入相應的js文件。所以如果api中缺少相關文件，可能會出現異常。我們把require那一段代碼注釋掉，發現引入init.js文件后，會自動動態引入其他js文件。如下圖所示：
客戶端發送的請求資源信息：
瀏覽器加載后的dom結構：
- arcgis js 依賴 dojo，所以有必要了解一些常用dojo基本操作。這里先簡單說一下require
在老版本中的寫法中，對require的作用可能更好理解一點。可以理解為：要new 一個esri.Map對象需要先引入其所在的包 esri.map
<script type="text/javascript"> dojo.require("esri.map"); function init() { var map = new esri.Map("viewDiv", { "basemap": "oceans" }); } dojo.addOnLoad(init); </script>
而示例中可以看作是老版本的簡寫。require([],function(){})函數中第一個參數可以看作是要引入的包數組，第二個參數function函數中的參數就是引入包(按順序)的別名，引入包成功后就會執行該函數。
- basemap參數，即為該地圖的底圖，可以在此底圖上疊加其他圖層。basemap官方提供有很多種：
