ArcGIS API for JavaScript學習（1）：第一個地圖
1.簡介
ArcGIS API for JavaScript跟隨ArcGIS 9.3同時發布，是ESRI根據JavaScript技術實現的調用ArcGIS Server REST API接口的一組腳本。當前的最新版本是Version 3.20。通過ArcGIS API for JavaScript可以將ArcGIS Server提供的地圖資源和其它資源(ArcGIS Online)嵌入到Web應用中。
在ArcGIS API For JS中，esri.Map類是最重要的一個類，Map作為地圖圖層的容器，存放各種地圖服務，同時Map具有一些常用的屬性和事件可以幫助我們完成一些復雜的操作。接下來我們使用Map類開始我們的HelloWorld程序。
2.創建第一個地圖程序
2.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.2 引用ArcGIS API for JavaScript
要開始使用ArcGIS API for JavaScript，需要在??代碼中添加以下腳本和鏈接標簽<head>：
<link rel="stylesheet" href="http://jsapi.thinkgis.cn/esri/css/esri.css"> <script src="http://jsapi.thinkgis.cn/"></script>
因為官方的鏈接速度較慢，這裏引用thinkgis社區提供的國內鏡像。
- 其中esri.css樣式表包含特定於Esri小部件和組件的樣式。
（可選）這裏還可以引用一個Dojo Dijit主題樣式。有四個主題可供選擇：Claro，tundra，soria和nihilo。使用Dojo Dijit主題是可選的，這樣做可以為API中包含的小部件設置一致的外觀。各種主題樣式表的URL如下所示：
http://jsapi.thinkgis.cn/dijit/themes/claro/claro.css
http://jsapi.thinkgis.cn/dijit/themes/tundra/tundra.css
http://jsapi.thinkgis.cn/dijit/themes/nihilo/nihilo.css
http://jsapi.thinkgis.cn/dijit/themes/soria/soria.css
2.3創建地圖對象並加載地圖
var map; require(["esri/map", "dojo/domReady!"], function(Map) { map = new Map("mapDiv", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" }); });
- require：是dojo提供的一個全局函數，用於加載模塊。Esri的JavaScript API建立在Dojo之上，並且依賴於Dojo的模塊系統和其他功能，如矢量圖形和本地化以及一種屏蔽瀏覽器差異的方法。
2.4.關聯Html
現在，創建地圖的JavaScript已經到位了，下一步是添加關聯的HTML。對於這個例子，HTML是非常簡單的：一個body標簽，它定義了瀏覽器中可見的內容，以及一個單一的div元素，在body裏面會創建地圖。
<body class="claro">
<div id="mapDiv"></div>
</body>
- 該div的id為“mapDiv”，以匹配傳遞給地圖構造函數的id。body標簽的class屬性為“claro”。這用於將頁面頭標中包含的claro樣式表的樣式應用於頁面中的元素（小部件）。也可以使用其他主題。
2.5添加樣式
對於本例子，地圖需要填充瀏覽器窗口。要實現這一點，在頁面的<head>標簽中添加以下css ：
<style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } </style>
2.6運行結果及完整代碼
- 運行結果
- 完整代碼
<!DOCTYPE html> <html> <head> <title>Create a Map</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="http://jsapi.thinkgis.cn/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://jsapi.thinkgis.cn/esri/css/esri.css"> <style> html, body, #mapDiv{ padding: 0; margin: 0; height: 100%; } </style> <script src="http://jsapi.thinkgis.cn/init.js"></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>
- 代碼說明
require函數是dojo提供的一個全局函數，只要引入init.js便可使用，require函數支持AMD（異步模塊定義，Asynchronous Module Definition）規範。
require函數有兩個參數，第一個參數是一個數組（用於加載的模塊），第二個參數是一個回調函數，註意前後加載的順序一定要一致，例如require的第一個參數是esri.map,回調函數的第一個參數必須是Map
require加載的第二個是dojo/domReady！,dojo/domReady！是一個插件（如果加載的模塊以感嘆號結尾，一般都為插件），此插件的作用是，當Html的dom加載完畢後在執行此函數，類似與window.onload事件。
Map類中有一個比較特殊的屬性叫做basemap,在arcgis api中，esri自己定義了一些底圖可直接供我們使用，這些底層的調用，我們可以根據制定basemap屬性直接調用已經定義好的底圖。
esri給我們定義的底圖有：streets ,satellite ,hybrid, topo, gray,dark-gray, oceans, national-geographic,terrain, osm,dark-gray-vector, gray-vector,streets-vector, streets-night-vector, streets-relief-vector,streets-navigation-vector,topo-vector.terrain, dark-gray, dark-gray-vector, gray-vector,streets-vector,streets-night-vector, streets-relief-vector, streets-navigation-vector , topo-vector,註意：要使用esri定義的底圖屬性basemap電腦必須聯網。
ArcGIS API for JavaScript學習（1）：第一個地圖