一、安裝包下載
首先從官網下載ArcGIS API for JavaScript 3.3 的API 和SDK,地址:http://support.esrichina.com.cn/2011/0223/960.html,需要注意的是,想獲取API和SDK,需要注冊一個Esri全球賬戶。
二、離線部署
部署到C:\Inetpub\wwwroot;
1、解壓arcgis_js_v33_sdk.zip和arcgis_js_v33_api.zip;
2、進行配置文件的修改,使其被其他程序調用時找到引用函數的位置;
(1)找到..\arcgis_js_v33_api\library\3.3\jsapi\init.js文件,打開,可以通過EditPlus打開;查找'[HOSTNAME_AND_PATH_TO_JSAPI]',替換為"<myserver>/ \arcgis_js_v33_api\library\3.3\jsapi/";其中<myserver>為機器名稱或者機器IP,沒有http前綴(如果在本地使用可以設為localhost);
改變前效果圖
改變后效果圖(以下不再截圖,與該類似)
(2)找到..\arcgis_js_v33_api\library\3.3\jsapi\js\dojo\dojo\dojo.js文件,打開;查找'[HOSTNAME_AND_PATH_TO_JSAPI]',替換為"<myserver>/ arcgis_js_v33_api/library/3.3/jsapi/";
(3)找到..\arcgis_js_v33_api\library\3.3\jsapicompact\init.js文件,打開;查找'[HOSTNAME_AND_PATH_TO_JSAPI]',替換為"<myserver>/ arcgis_js_v33_api/library/3.3/jsapicompact/";
(4)找到..\arcgis_js_v33_api\library\3.3\jsapicompact\js\dojo\dojo\dojo.js文件,打開;查找'[HOSTNAME_AND_PATH_TO_JSAPI]',替換為"<myserver>/ arcgis_js_v33_api/library/3.3/jsapicompact/";
保存之后,將arcgis_js_v33_sdk文件夾直接拷貝到C:\Inetpub\wwwroot下,變成C:\Inetpub\wwwroot\arcgis_js_v33_sdk;
將arcgis_js_v33_api文件夾直接拷貝到C:\Inetpub\wwwroot下,變成C:\inetpub\wwwroot\arcgis_js_v33_api;
部署后,可以看到API和SDK的結構如下:
然后在IE中輸入http://localhost/arcgis_js_v33_sdk/sdk/index.html,顯示如下界面:
三、關於智能提示
開發如果沒有智能提示,可想而知是一件多么痛苦的事情,好在Esri為Visual Studio 2010、Aptana3提供了一個插件,這樣就使我們在使用ArcGIS API for Javascript的時候獲得了方便,可以大大節約開發時間 。 這個插件其本質就是一個javascript文件,下載地址 :https://developers.arcgis.com/en/javascript/jsapi/api_codeassist.html。
需要注意的是在Visual Studio 2010中dojo並不能智能提示,而Aptana和Visual Studio 2012 中對dojo則可以做到智能提示,如果對智能提示要求高的,可以采用Aptana和Visual Studio 2012作為開發環境。
四、測試——第一個應用程序
一切就緒之后后,我們要做的就是嘗試,跟我們學習C、C#語言一樣,都會用“Hello Word!”作為我們的第一個程序,但是在這里,我們只需要簡單的加載一幅捷泰科技有限公司官網上的地圖作為我們的開始。
1. 建立項目
啟動Visual Studio 2010,新建項目,選擇“ASP.NET空Web應用程序”,給項目命名,如下圖:
2. 添加HTML文件
在Visual Studio 2010的覽決方案管理器中,找到剛才新建的項目,在項目上點擊右鍵,選擇添加, 然后是新建項,選擇HTML頁,如下圖:
3. 引入ArcGIS API for Javascript的智能提示文件
在項目中,創建dojo文件夾,引入ArcGIS API for Javascript的智能提示文件,如下圖所示:
如果是使用Aptana3,直接將智能提示文件拷貝到工程里面就可以了。
4. 編寫代碼
打開FirstMap.html頁面,寫入下面的代碼:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>第一個地圖應用</title> <link rel="stylesheet" type="text/css" href="http://192.168.1.100/arcgis_js_v33_api/library/3.3/jsapi/js/dojo/dijit/themes/tundra/tundra.css" /> <link rel="stylesheet" type="text/css" href="http://192.168.1.100/arcgis_js_v33_api/library/3.3/jsapi/js/esri/css/esri.css" /> <script type="text/javascript" src="http://192.168.1.100/arcgis_js_v33_api/library/3.3/jsapi/init.js"></script> <script src="dojo/jsapi_vsdoc12_v33.js" type="text/javascript"></script> <style type="text/css"> .MapClass { width:1400px; height:700px; border: 1px solid #000; } </style> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); function Init() { var MyMap = new esri.Map("MyMapDiv"); var MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"); MyMap.addLayer(MyTiledMapServiceLayer) } dojo.addOnLoad(Init); </script> </head> <body class="tundra"> <div id="MyMapDiv" class="MapClass"></div> </body> </html>
5. 運行程序
程序運行之后效果圖如下圖所示:
部署成功
附贈:arcgisonline上的一些地址:http://server.arcgisonline.com/ArcGIS/rest/services