一 API准備
- 從網上下載開發包：ArcGIS for JavaScript（百度網盤地址）
sdk中含有API的幫助和例子
2.離線部署（以IIS為例）
配置IIS（詳見網絡）；解壓離線包，包中的install_SDK.html/install_API.html文件含有詳細的部署過程。
二 第一個應用程序
- 使用在線api
(1)創建簡單的html文檔
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> </head> </html>
(2)在<head>中引入樣式表和ArcGIS for JavaScript
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css"> <script src="https://js.arcgis.com/3.17/"></script>
(3)定義頁面內容
<body class="claro"> <div id="mapDiv"></div> </body>
(4)在<head>中加載地圖
<script> var map; require(["esri/map", "dojo/domReady!"], function(Map) { map = new Map("mapDiv", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" }); }); </script>
(5)設置樣式，在<head>中加入如下代碼：
<style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } </style>
完整代碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>hello world</title> <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } </style> <script src="https://js.arcgis.com/3.17/"></script> <script> var map; require(["esri/map", "dojo/domReady!"], function(Map) { map = new Map("mapDiv", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" }); }); </script> </head> <body class="claro"> <div id="mapDiv"></div> </body> </html>
運行效果如圖：
2 使用離線api
將樣式表和ArcGIS for JavaScript替換為本地部署的api(由於部署位置不同代碼僅供參考)
<link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"> <script src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
3 加載中國地圖， 完整代碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>hello world</title> <link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } </style> <script src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script> <script> var map; require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer","dojo/domReady!"], function(Map,ArcGISTiledMapServiceLayer){ map = new Map("mapDiv"); var agoServiceURL ="http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"; var tileMap=new ArcGISTiledMapServiceLayer(agoServiceURL); map.addLayer(tileMap); }); </script> </head> <body> <div id="mapDiv"></div> </body> </html>
運行效果如圖：
