《JavaScript建構Web和ArcGIS Server應用實戰》——2.3 使用ArcGIS API for JavaScript建立應用程式的基本步驟

本節書摘來自異步社群《javascript建構web和arcgis server應用實戰》一書中的第2章，第2.3節,作者： 【美】eric pimpler（派普勒） 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

使用arcgis api for javascript建立任何gis地圖應用程式，都需要遵循一些步驟。假如想讓地圖成為應用程式的一部分，那麼就需要你按照這些步驟來執行。在閱讀本書時，我很難想象你不按照這些步驟來做會遇到怎樣糟糕的情況。簡而言之，你需要遵循以下步驟。

1．建立頁面html代碼。

2．引用arcgis api for javascript和樣式表。

3．加載子產品。

4．確定dom可用。

5．建立地圖。

6．定義頁面内容。

7．頁面樣式。

這裡僅僅是一個必需步驟的簡短描述，我們将在接下來的介紹中對每個步驟進行詳細說明。

2.3.1　建立web頁面html代碼

在前面章節中，你已經掌握了html、css和javascript的基礎概念。現在我們就來将這些技術應用到實際開發示例中去。首先你需要建立一個簡單的html文檔作為最終的地圖容器。當我們開始使用arcgis api for javascript沙盒時，這些步驟就已經為你準備好了。但是，我想讓你花點時間去看這些代碼，進而能更好地掌握這些概念。在沙盒的左側面闆中，你看到下列示例中加粗顯示的代碼是引用自web頁面中基本的html代碼，當然這裡也有一些其他的html和javascript代碼，但是下列代碼構成一個web頁面的基本組成部分。這段代碼包括幾個基本的标簽，包括< html >、< head >、< title >、< body >等。

2.3.2　引用arcgis api for javascript

使用arcgis api for javascript進行開發時，必須要添加樣式和api引用。在沙盒中，下列幾行代碼已經添加到了

标簽内部。

< script >标簽加載的是arcgis api for javascript。在編寫本章時，它的目前版本是3.7。當一個新版本的api釋出的時候，你需要相應地修改這個數字。< link >标簽加載的是esri.css這個esri工具群組件的特定樣式。

你可以選擇性地添加一種dojodijit主題樣式。arcgis api for javascript是直接建立在dojojavascript架構上的。dojo包括claro、tundra、soria和nihilo這四個預先定義的主題，它們用于控制添加到應用程式中的使用者界面工具的外觀樣式。下列代碼示例引用了claro主題樣式。

其他樣式可以參考下列示例代碼進行引用，當然你也可以不引用任何一種樣式。但是假如你添加dojo使用者界面元件（dijits），你就需要通過加載其中的一種樣式來控制元件的外觀。

2.3.3　加載子產品

在建立地圖對象之前，必須首先通過使用一個名為require()的函數來完成對地圖資源的引用。

過時或者amd dojo

無論是使用過時的dojo還是使用新的amd，對于大多數開發者來說都是一件沮喪的事情。異步模型定義（amd）是在1.7版本的dojo中産生的。arcgis api for javascript3.4是使用新的amd方式進行所有子產品重寫後的第一個版本。過時的遺産和amd方式都可以使用，但是建議在編寫任何一個新的應用程式時都使用新的amd方式。在本書中，我們要遵守這個規定，但是我們還要意識到在3.4版本的api釋出之前編寫的應用程式和一些esri示例仍然是以老版的代碼風格呈現的。

在web頁面中使用require()函數來導入資源時，arcgis api for javascript提供了很多種資源，其中包括esri/map這個在建立地圖或者使用geometry、graphic和symbols之前必須用到的資源。一旦提供了資源的引用，你就可以使用map()構造函數來建立地圖。下面是如何在沙盒中運作代碼的要點。

在向沙盒中添加代碼之前，最好先移除下列加粗顯示的代碼，删除的代碼是使用arcgis api for javascript過時的方式編寫的。以後我們打算使用新的amd方式，在未來的沙盒版本中，可能就不需要删除這些代碼了，希望esri會最終将這個基本代碼塊遷移到更新的amd方式上去。

導入的資源需要包括在一個新的< script >标簽内。添加下列加粗顯示行的代碼到沙盒中的< script >标簽内，require()函數中的參數名稱可以按照你的習慣命名，但是無論是esri還是dojo都提供了一系列首選參數。我建議大家在向require回調函數中命名參數的時候使用esri的首選參數。類似地，dojo也有一系列首選參數别名。例如，在下列添加的代碼中，我們提供了esri/map資源的引用，然後在内部的匿名函數中，又提供了一個map的首選參數。在require()函數中引用的每一個資源都有一個相應的參數用于提供通路到該資源對象。

2.3.4　確定dom可用

當一個網頁加載時，所有組成頁面的html元素都被加載并且解析。這就是大家熟知的文檔對象模型（dom），它能保證javascript不能通路到網頁上的任何元素直至所有的網頁元素都被加載完畢。假如你的javascript代碼試圖去通路一個還沒有加載的網頁元素，就很明顯會報錯。為了避免這種情況的發生，dojo中有一個ready()函數，可以将其包括在require()函數中，它僅會在html元素和任何子產品加載之後才會執行。

另一種方法是你可以使用dojo/domready!插件去保證所有的html元素都被加載。在這個練習中我們将使用第二種方法。

在先前的代碼當中，我們已經使用dojo/domready!插件并且将其添加到了require()函數中。

雖然可以直接添加javascript代碼到基本的html檔案中，但是更好的辦法是建立一個單獨的javascript檔案（字尾名為.js）。本書為了簡單起見，大部分代碼都是直接寫在了html檔案内，但是當應用程式變得龐大且複雜的時候，希望你遵循将javascript代碼寫在一個單獨的檔案中的原則。

2.3.5　建立地圖

建立一個新的map地圖是通過esri/map這個先前步驟中所引入子產品中的map類來實作的。在require()函數内部，使用構造函數來建立一個新的map對象。map對象的構造函數中接收兩個參數，第一個是在web頁面上用于承載地圖的

标簽的引用，還有一個是可選參數，其作用是定義各種地圖加載選項。這個可選項被定義成一個包括一系列鍵/值對的json對象。

可能最常見的選項是basemap，通過它你可以從arcgis.com中選擇一個預先定義的basemap，包括：streets、satellite、hybrid、topo、gray、oceans、national-geographic或osm。zoom選項用來定義地圖初始縮放級别，它是一個整數對應一個預先定義的縮放範圍等級。minzoom和maxzoom選項分别定義地圖最小和最大範圍縮放等級。center選項定義初始顯示地圖時顯示的中心點，這個點是一個point對象，包括一個經度/緯度坐标值對。當向map對象的構造函數中傳遞參數時，還有一些其他的額外選項。

首先，我們建立一個全局的變量map以及require()函數，添加下列加粗顯示的代碼行。

添加下列加粗代碼到require()函數中，這些代碼是新的map對象的構造函數。傳遞到該構造函數中的第一個參數是承載地圖的< div >标簽的id引用，我們到現在還沒有定義這個< div >标簽，但是在下面步驟中很快就會定義。第二個傳遞到構造函數中的參數是一個json對象，包括地理坐标的可選項，如地圖中心、縮放級别和topo基礎地圖。

2.3.6　建立頁面内容

最後的一個步驟是建立用來承載地圖容器的html< div >标簽，你需要為這個< div >标簽配置設定一個唯一的id編号，這樣javascript代碼就能引用到它。在沙盒中這個 < div >标簽已經建立好了，唯一辨別符為mapdiv，如下列加粗代碼行所示。另外，還需要為

标簽定義一個類屬性，它應該引用你引入的dojo樣式表。在下列代碼中，你可以看到< body >标簽已經在沙盒中建立了并且完成了先前的兩個步驟。

2.3.7　頁面樣式

你可以向< head >标簽中添加樣式資訊來為web網頁定義各種樣式。在這個例子中，樣式已經在沙盒中為你建立好了，如下列代碼所示。本例中的樣式包括設定地圖，以适應整個浏覽器視窗。

2.3.8　完整代碼

這個簡單例子的完整代碼應該是這樣的。

通過單擊run按鈕來運作代碼，假如代碼一切正常的話，你可以看到如圖2-3所示的輸出結果。