> 學習和使用ArcGIS API for JavaScript開發差不多有兩年了吧，跌跌撞撞斷斷續續也做了幾個小專案，學習之路相對比較平滑，但也遇到不少坑坑窪窪，這些坑大部分是自己當時能力所限造成的，也有的是ArcGIS API本身存在的一些問題，本文主要談談我對ArcGIS API使用心得。 ## 從API部署開始談起 對於大部分ArcGIS API for JavaScript的初學者，部署ArcGIS API 肯定也花費了一番功夫（大神例外）。記得當時我部署ArcGIS API整整琢磨了兩天，才讓“hello world”跑起來。 **第一個坑：替換路徑要不要加埠** 部署過ArcGIS API的朋友都知道，其中部署最關鍵的一步就是將` [HOSTNAME_AND_PATH_TO_JSAPI] `替換為部署後API的HTTP路徑。我記得當時我將init.js和dojo.js的`[HOSTNAME_AND_PATH_TO_JSAPI]`替換為`http://localhost:8080/arcgis_js_api/library/3.19/3.19/` 這一步是沒有問題的，然後通過`script`標籤引用：

 <script src="http://公網ip/arcgis_js_api/library/3.19/3.19/init.js">
 
</script>

大家或許已經發現了，我沒有加埠，當時我是這麼想的，因為我的tomcat映射了公網IP，而預設埠就是8080，所以理論上沒加埠是可以的，而且當時我還在瀏覽器中確認了通過這個地址是可以訪問init.js的。可是，通過不帶埠的方式在html中引用卻不起作用，這讓我百思不得其解。這個問題讓我糾結了很久。 **第二個坑：替換路徑要和引用一致** 這個坑快要讓我抓狂了，好不容易知道要加上埠後，但是地圖始終不能出來，我一直想不明白問題出在哪裡，當時還一直以為是自己下載的API檔案有缺漏，重新下載了好幾回，可依舊都是老樣子。但我這種人就是喜歡死磕，有種不達目的決不罷休的蠻勁。第二天起床那會兒，想了下這個問題，突然想到js引用過來，裡面的localhost路徑會不會成了客戶機的localhost了，而實際要指向的應該是伺服器的地址，所以會報錯。這下我感到頓時又有了希望，唰唰唰起床將init.js和dojo.js的localhost也改成了ip。果然，成功了。 **總結** 現在想想這兩個坑主要還是自己當時的無知吧，其實部署ArcGIS API也很簡單，只要將` [HOSTNAME_AND_PATH_TO_JSAPI] `替換為部署後API的HTTP路徑，而這個路徑就是今後在`script`引用ArcGIS API的url，不管有沒有預設埠，替換時加了埠，引用時也就要用埠；如果是本地部署和本地使用ip可以是localhost，如果是在伺服器上部署，其他機器上使用那就必須要用能夠訪問的ip或域名了。 ## ArcGIS API的require ArcGIS API for JavaScript是建立在大名鼎鼎的dojo框架之上，所以也就繼承了dojo的AMD規範。AMD規範即非同步模組載入機制，這種規範讓JS就像其它面嚮物件語言（比如Java）一樣，通過模組去管理程式碼。dojo的模組有點像java的包，而我們所需要的類就是在不同的模組中。 當時我剛看視訊加w3school學完了js基礎，讓我直接跳到JS模組化程式設計還是有點難以接受的，可是沒有辦法，不管是官網的demo還是網上的教程都是基於AMD規範的，作為初學者也就沒什麼選擇了。 當時我給自己兩個選擇： - 暫停ArcGIS API學習，深入學習JavaScript - 不管AMD，先依葫蘆畫瓢 我選擇了依葫蘆畫瓢，就像找規律一樣

require
 
([],function(){

});

先去官網API中找到自己要的類，然後向require中填入即可。比如，我要建立一張地圖，就先找MAP類，然後在官網中找到相應位置，向require套入相應的程式碼  但曾經這段程式碼讓我抓狂過：

<script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer"
      ], function (
        ArcGISDynamicMapServiceLayer, Map) {

        map = new Map("mapDiv", {
          sliderOrientation : "horizontal"
        });

        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {
          "opacity" : 0.5
        });

        map.addLayer(dynamicMapServiceLayer);
      });
</script>

看似沒有什麼問題，都是依葫蘆畫瓢，在require中加入了該加的，但是，地圖沒出來，後臺報錯。糾結這裡挺久的，後來也是回過去看官網的demo，發現require的第一個引數的順序要跟回撥函式的引數順序一致。最後解決了這個問題。 ## ArcGIS API中的模組 上面我們已經說到，ArcGIS API for JavaScript是建立在dojo之上，遵循AMD規範。所以在學習了ArcGIS API一段時間後，我們要有基本的模組程式設計思想了，不能像一開始那樣只知道照著官網的demo去寫。 AMD規範簡單到只有一個API，即define函式：

define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

其中: - module-name: 模組標識，可以省略。 - array-of-dependencies: 所依賴的模組，可以省略。 - module-factory-or-object: 模組的實現，或者一個JavaScript物件。 從中可以看到，第一個引數和第二個引數都是可以省略的，第三個引數則是模組的具體實現本身。 具體怎麼建立一個模組呢，可以參考這兩篇文章： - [《官網文件-Write A Class》](https://developers.arcgis.com/javascript/3/jshelp/intro_javascript_classes.html) - [《建立類（點選獲得位置資訊）—ArcGIS API for JavaScript》](http://blog.csdn.net/agisboy/article/details/77198960) **擴充套件模組**。用面向物件的語言來說就是繼承，我們可以繼承某個已有的類，然後擴充套件其功能。最常見的就是`TiledMapServiceLayer`類了，我們經常擴充套件這個類來實現載入非ArcGIS Server釋出的切片服務，比如載入天地圖切片、谷歌地圖切片等。 **建立模組**。我們可以將一些功能整理成模組，不斷積累自己的模組不僅可以大大避免寫重複程式碼，還能鞏固和加深對ArcGIS API的學習。比如我們經常要給地圖配置一個工具條，工具條實現了地圖的基本功能（放大、縮小、平移、座標拾取、測量等）我們可以將工具條整理成一個模組，這樣下次使用時就不用再敲那麼多程式碼了。 ##

為什麼不用百度（或高德）

很多人問過我為什麼要學習ArcGIS API for JavaScript，同樣的功能用百度地圖API更容易實現。其實問這個問題的人一般不是GIS專業或者是剛開始接觸地圖開發。的確，百度地圖是很強大，我們接觸的應用大部分也是基於百度地圖API（或高德），可是這些應用用地圖的主要目的是展示某些位置資訊而已，比如共享單車APP。

在共享單車APP中，地圖的主要作用是展示單車和使用者的位置，這些展示功能用百度或高德確實很方便。但是當我們要用地圖去實現一些複雜功能時，用百度地圖API就比較麻煩了，而ArcGIS API能更好的處理這些問題，因為它能和ArcGIS其它產品無縫的對接。比如我們要做一個城市的消防救援系統，最基本的網路分析，如果用百度API去實現這些功能估計夠嗆，而ArcGIS API卻能快速的實現。

其實要想知道ArcGIS API比百度或高德等API的強大之處，開啟你ArcGIS的工具箱你就懂了，雖然ArcGIS API還不能完全實現工具箱裡的所有功能，但這一定是ArcGIS API的目標吧。