ArcGIS JavaScript API 4.0 beta 1

開始

1.1綜述

      

已經發布的ArcGIS JavaScript API 4.0有着最前沿的新特性，這是一個更加改善開發者體驗的並繼續成爲頂級的Web製圖API。它提供了更加簡潔明瞭的API。另外，3D支持也已經實現了。本文以ArcGIS for Developer中ArcGIS JavaScript API 4.0的英文文檔爲參考，結合實際自己理解編寫本文檔，有不正確之處還望多多見諒。

1.1.1前景

值得注意的是，3.x API的開發目前依然支持，並且4.0版本項目目前還處在第一個測試版的階段。計劃在正式版出來之前會有多個測試版發佈。

1.1.2更簡潔的API

這個API提供的結構，簡化了web應用程序的創建流程。例如，更短和更明確的類名，前後一致的框架，移除讓人混亂的get/set屬性名和多個帶有各種選項的構造函數。

1.1.3 3D的支持

4.0版本增加了對3D(scenes)的支持。除了SceneView製圖組件以外，同時還包括新的圖層類型和3D符號。

注：想了解更多相關內容，請看“探索4.x”主題。

1.1.4技術支持

對於beta1版，Esri將不會通過標準的技術支持頻道進行支持。可以將問題和疑惑在GeoNet的“4.0 beta”版塊中提出。

1.2探索4.x API

4.0版本的JavaScript API 包含很多底層設計的改變和提升。更多有關API變化的基本原理和細節可以在“從3.x向4.0遷移”標題下查看。兩個最顯著的變化是：

更簡潔的API

對3D的支持

1.2.1簡潔一致的API

4.0版本的JavaScript API使用更加清晰的實現方式來改善開發者的體驗。開發者應該伴隨着這種變化來計劃他們應用的實現。

下面有些要點在使用4.xAPI進行編寫應用時需要考慮。

1.2.2結構和屬性

注：獲取更多有關獲取、設置以及監聽屬性的信息，請參考“Workingwith properties”主題。

 

所有的屬性都可以在構造函數中設置。

在4.x版本之前，很多對象可以用不止一種的方式進行構造，並且以一種特定的命令使用許多不同的參數構造。以後不會再這樣了。現在對於每個類只有一個構造函數。類的屬性可以通過它的構造函數或者直接通過屬性本身進行設置。這樣也沒有必要記住設置屬性的命令了。

這是一個代碼片段，使用MapView構造函數直接設置中心點和比例尺。

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">view = new MapView({
  center: [-122, 38],
  scale: 12345678
});
</span></span>

這是一個代碼片段設置了一個空的構造函數，然後分別設置了中心點和比例尺屬性。

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">view = new MapView();     
view.center = [-122, 38];
view.scale = 12345678;
</span></span>

1.2.3事件監聽方式的變化

在4.x API中已經不再通過propertyname-change事件監聽屬性變化，你現在只需要使用.watch()方法來監聽特定的屬性更改。

有關使用屬性的更多細節你可以在“從3.x向4.0遷移”標題下找到。

1.2.4 3D的支持

4.0版本增加了對3D(scenes)的支持。除了SceneView製圖組件以外，同時還包括新的圖層類型和3D符號。

Viewpoint和Camera這兩個類是4.0新出現的兩個類。Camera 提供了3D視角的可見範圍，Viewpoint描述了視線的中心點，不管是在2D還是在3D視角中。他們可以做的事情包括：

通過這個區域存儲的範圍來展示這個區域，或者

通過存儲的比例尺的信息進行製圖。

在2D視角中Viewpoint決定了使用的中心點和比例尺。就像Camera決定了一個3D的視角一樣。這樣做是因爲比例尺在3D和2D中的不同。

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">var viewpoint = new Viewpoint({
   targetGeometry: new Point(4.4856, 48.3908),
   scale: 2000
 });
view.animateTo(viewpoint);
</span></span>

1.2.5 3D符號

3D符號在4.x版本中是新出現的。這些包含“3D”的符號名稱可以在API的參考文檔中查看。每一個3D符號可能包含幾個符號圖層。正因爲如此，一個單獨的圖形或者幾何可以以多種方式符號化。下面是兩種不同類型的3D符號的例子。

1.2.6 Dojo

ArcGIS API for JavaScript4.0 beta 1使用Dojo 1.10.4，dgrid版本0.3.17。

put-selector版本0.3.6和xstyle版本0.1.3也包括在內。

1.3系統要求

爲了使用版本4。x,您的瀏覽器必須滿足某些系統需求。

1.3.1瀏覽器的支持

主流的瀏覽器和IE9以上版本支持2D製圖

3D製圖：必須是支持WebGL的瀏覽器

IE11

Chrome

Firefox

Safari

所有移動和iPad的瀏覽器都不支持3D

1.4 Beta 1版本的侷限

Beta 1只包括在API參考文檔中的模塊。例如Beta1中web地圖在web場景中是不可用的。

一旦一個幾何圖形被添加到graphicslayer中，你就不能再改變它的幾何形狀。

2使用新版API

2.1項目從3.x向4.0遷移

4.0版本的API是對ArcGIS APIfor JavaScript及其製圖組件一次重大的修改。這不僅僅是簡單的修改升級而是視爲對整個應用進行重構。

寫這個部分的目的是爲了給那些使用3.x API開發應用的開發者們提供用4.0 API的幫助。

雖然API的升級有一個很長的列表，但是我們還是列了一些重要的點：

•       屬性的處理
•       視角的使用
•       地圖和圖層的細節
•       模塊和包的升級
•       只支持AMD模式
•       一些廢棄的說明

以上是我們在4.0版本中做的重要更新。這些改變使開發者更加高效的專注於他們所開發的應用。從這些變化中可以看到構造函數、屬性和事件是怎樣處理的。

2.1.1屬性

在4.0之前，一些屬性可以通過調用getMethodName或者setMethodName來獲取（讀）或者設置（寫）。這些類型的方法不再需要，因爲現在API支持一種更簡潔和一致的方式來獲取和設置屬性。

直接在對象上設置屬性，例如map.basemap=’oceans’

      直接從對象獲取屬性，例如map.basemap.title

例如在3.x中設置地圖的顯示範圍使用類似代碼

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">map.setExtent(newExtent);
而下面的代碼展示在4.0中怎樣以更簡短的代碼設置地圖顯示範圍
map.extent = newExtent;
在4.0中可以使用.get()來深度訪問屬性，代碼片段如下所示:
var basemapTitle = map.get("basemap.title");
</span></span>

2.1.2屬性監聽的變化

在4.0之前，屬性的更改是通過事件處理。隨着4.0的到來，屬性改變的監聽變得更加容易。這是通過.watch(property, callback)方法。當屬性發生變化時，回調函數將會接一系列參數，包括，受新值、舊值、屬性名、監聽對象。

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">var propertyChangeHandler = function(newValue, oldValue, property, object){  
  console.log("New Value:",newValue,"Old Value:",oldValue,
  "Changed Property:",property,"Watched Object:",object);
}; 
</span></span>

2.1.3 Views

在4.0中map可以以2D或者3D的形式展示。正因如此繪圖邏輯被修改了，Map和Layer不再處理繪圖邏輯，取而代之的是Views。

Views是一個在4.0中才被引進的內容。視角可以是下面兩種的其中一個：

      MapView適用於展示2D

      SceneView適用於展示3D。

View是專門用來可視化你的地圖或者場景數據的。map包含要展示的真正的數據和圖層，view負責處理這些圖層的展示。這些數據是怎樣可視化或者展示，取決於你是使用2D還是3D。view可以引用map，例如view.map，但是map不能引用view。需要注意的是一個map可以被多個view使用。

還有另外一種理解方式：map描述基礎底圖和要素圖層，然而view是一個窗口展示map。

下面的代碼展示怎樣創建一個2D和3D的視角。

使用MapView創建一個2D視角：

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">function (Map, MapView){
  map = new Map({
    basemap: "topo"
  });
  view = new MapView({
    container: "viewDiv",
    map: map,
    scale: 2400000
  });
}
</span></span>

使用SceneView創建一個3D視角

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">function (Map, SceneView){
  map = new Map({
    basemap: "topo"
  });
  view = new SceneView({
    container: "viewDiv",
    map: map,	
    scale: 2400000
  });
}
</span></span>

2.1.4地圖和圖層上的細節

下面列舉了一些地圖和圖層有一些重要的更新。

      從4.0開始，基礎底圖與業務圖層分離。

      不論2D還是3D都可以進行地圖的旋轉。

      Graphiclayers可以在任何一個圖層集中添加。在4.0之前的版本，他們會一直添加在最上面的圖層。

添加了GroupLayer圖層類型。

2.1.5模塊和包的升級

詳細信息,請參閱“模塊升級”主題,以下是幾個值得注意的部分:

包名的改變，例如esri/dijit，現在更改爲esri/widgets/。

更簡短、清晰的模塊名，例如用ArcGISTiledLayer代替ArcGISTiledMapServiceLayer。

更加規範的模塊命名，現在所有的命名都以一個大寫字母開頭。

support類現在被移動到support文件夾中

support包的添加幫助API的引用更加有組織性，例如esri/layers/support和esri/tasks/support

esri/config 的結構發生變化，esriConfig.defaul的屬性現在直接位於esriConfig，例如設置默認地理服務：

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">// 3.x
esriConfig.defaults.geometryService = new GeometryService("http://yourdomain.com/geometryService");
// 4.x
esriConfig.geometryService = new GeometryService("http://yourdomain.com/geometryService");
3.x中的defaults.io 對象現在是esriConfig.request
// 3.x
esriConfig.defaults.io.alwaysUseProxy = true;
// 4.x</span><pre name="code" class="javascript"><span style="font-family:Microsoft YaHei;font-size:12px;">var basemapTitle = null;
//優先檢查已經存在的基礎底圖並獲取基礎底圖的標題
if (map.basemap) {
  basemapTitle = map.basemap.title;
}
</span></span>

esriConfig.request.alwaysUseProxy = true;

三個遺留的*-all模塊已經被移除。這能更好的處理構建和使用網絡優化。

構造函數不再支持JSON，而使用fromJson方法代替。例如，Graphic.fromJson（beta1版本中依然包含一些3.x類型的構造函數）。

FeatureLayer中不再有graphics，使用featureLayer.graphicsCollection方法可以獲取graphics。例如：

<span style="font-size:14px;">graphicsCollection.length();
graphicsCollection.getItemAt(index);
</span>

2.1.6僅支持AMD模式

在4.0之前你可以同時使用AMD和以前的編程模式，從4.0開始，我們僅支持AMD的編程方式。

2.1.7廢棄聲明

Geocoder組件從3.13開始就被棄用，它同樣也不是4.0的組成部分，請使用Search組件代替。

2.2屬性的使用

ArcGIS for JavaScriptAPI支持簡單、一致的方式獲取和設置所有屬性。

注：每個類的所有屬性可以在構造函數中設置。獲取有關更多信息請參考“結構和屬性”部分。

2.2.1獲取屬性

訪問屬性值的一種方法是直接從對象中引用它。下面的例子就是用這種方法從基礎底圖中獲取標題。

<span style="font-size:14px;">var basemapTitle = null;
//優先檢查已經存在的基礎底圖並獲取基礎底圖的標題
if (map.basemap) {
  basemapTitle = map.basemap.title;
}
</span>

你也可以使用get()函數獲得屬性值。get()函數會自動的檢查是否對象之前已經獲取所要的屬性，所以你沒必要再進行檢查了。在之前的例子，我們會使用if(map.basemap)檢查，在下面的片段中，get()替你做了這個工作。

<span style="font-size:14px;">var basemapTitle = map.get("basemap.title");</span>

2.2.2設置屬性

設置一個屬性值，可以直接通過對象進行設置，如下所示。

<span style="font-size:14px;">view.center = [ -100, 40 ];
 view.zoom = 6;
 map.basemap = 'oceans';
</span>

同時也可以通過調用set()方法設置多個屬性。

<span style="font-size:14px;">var viewProperties = {
  center: [ -100, 40 ],
  zoom: 6
};
view.set(viewProperties);
</span>

注：在4.x之前的版本中，一些屬性可以通過使用getMethodname()或者setMethodname()來獲取或者設置。隨着API支持簡潔的、統一的方式獲取和設置所有屬性，之前那種方式不再需要。

2.2.3監聽屬性

注：在4.0之前，屬性的監聽使用過事件的處理來實現的。

在4.0中監聽屬性值的變化使用過調用.watch(property, callback)方法實現的，每當屬性值被改變的時候，回調函數（callback）就會被調用。爲了使用更加便利，這個方法同樣可以監聽嵌套屬性。例如basemap.title

例如，在下面的代碼片段中，我們設置了一個處理器來監聽基礎底圖的標題的變化。

<span style="font-size:14px;">//創建一個Map並使用 'streets' 底圖
var map = new Map({
  basemap: 'streets'
});
//監聽處理: 每當map的地圖的標題發生變化時，調用回調函數（callback）
var handle = map.watch('basemap.title', function(newValue, oldValue, property, object) {
 console.log("New value: ", newValue,  //新的屬性值
            "<br>Old value: ", oldValue,  //變化之前的屬性值
            "<br>Watched property: ", property, //這個例子中這個值一直是"basemap.title"
            "<br>Watched object: ", object);  //這個例子中這個值一直是map對象
});
</span>

如果用戶改變了基礎圖:

<span style="font-size:14px;">map.basemap = "topo";</span>

控制檯將會基於監聽處理器打印下面的信息：

<span style="font-size:14px;">New value: Topographic 
Old value: Streets
Watched property: basemap.title
Watched object:… //這裏會打印 map對象
</span>

2.2.4附加信息

爲進一步的信息請參考這些額外的主題:

從3.x向4.0遷移

Accessor 類

dojo/Stateful

dojo/Evented

 

 

2.3promises的使用

Promises在ArcGIS API for JavaScript 4.0版本中扮演了一個非常重要的功能。越深刻的理解Promises，你就越能在自定義的web應用中更好的利用API，同時也能讓自己的代碼更加簡潔。

2.3.1什麼是promises

簡單的理解，promise表現爲從一個異步任務中返回一個未來值。當任務執行時，promises允許其他進程同時運行，這會優化應用的表現，讓用戶有更好的體驗。其實，promise就是一個值“許諾”在進程完成時返回。當有多個網絡請求，而且網絡延遲和下載速度不可預知時，這個技術就非常有用。

一個promise會處在三種狀態中的一種：等待、完成、拒絕。當一個promise完成時，它會通過一個callback函數將完成的值傳遞給另外一個promise。當一個promise被拒絕時，他應該會運行一個errback函數。

注：Promises vs. Event listeners

說起callback和errback也許會讓人聯想到事件監聽。那麼爲什麼你要使用promise替代事件監聽呢？在下面的部分“理解.then()”中你會看到，在一個異步的過程完成之後promise讓你直接訪它的結果。相比之下，如果你在事件已經發生後初始化一個事件監聽，這個監聽將永遠不會變化。

2.3.2 理解 .then()

Promises一般使用.then()方法。這種強大的方法允許你定義回調函數（callback）和報錯函數（errback）。第一個參數是回調函數（callback），第二個函數是（errback）。

<span style="font-size:14px;">someAsyncFunction().then(function(resolvedVal){
  //This is called when the promise resolves
  console.log(resolvedVal);  //logs the value the promise resolves to
}, function(error){
  //This function is called when the promise is rejected
  console.error(error);  //logs the error message
});
</span>

示例：GeometryService.project()

在這個例子中我們使用 GeometryService 將數個點映射到一個新的空間參考系中。在GeometryService.project()文檔中，我們看到，promise成功的話project()返回一組映射好的空間點。

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">require([
  "esri/tasks/GeometryService",
  "esri/tasks/support/ProjectParameters", ...
  ], function(GeometryService, ProjectParameters, ... ) {
  
    //Create a new instance of GeometryService
    var gs = new GeometryService( "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer" );
    //set up the projection parameters
    var params = new ProjectParameters({
      geometries: [points],
      outSR: outSR,
      transformation = transformation
    });
    
    //run the project function
    gs.project(params).then(function(projectedGeoms){
      //the promise resolves to the value stored in projectedGeoms
      console.log("projected points: ", projectedGeoms);
      //do something with the projected geometries inside the .then() function
    }, function(error){
      //print error if promise is rejected
      console.error(error);
    });
});
</span></span>

2.3.3 鏈接promise

使用promise的優勢之一是可以利用.then()將多個promise鏈接在一起。你可以通過移除嵌套回調函數後的嵌套函數來優雅的清理你的代碼，讓你的代碼更易讀。當你將多個promise鏈接在一起時，每一個進程通過.then()定義的值依賴於上一個promise的成功處理。這可以讓你按順序擺放代碼，無需在相互嵌套多個回調。需要非常注意的是，每一個.then()函數在給下一個.then()提供返回值是必須要使用return命令。

示例： geometryEngineAsync.geodesicBuffer()

我們繼續前面投影的例子，使用多個.then()函數來對我們投影的點執行一些基本分析。下面我們看一個真實的例子展示promise的鏈接。

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">/***************************************
  * See previous example for preceding code
  ****************************************/
  
  //creates instance of GraphicsLayer to store buffer graphics
  var bufferLayer = new GraphicsLayer();

  //Project the points and chain the promise to other functions
  gs.project(params)
    .then(bufferPoints) //When project() resolves, the points are sent to bufferPoints()     
    .then(addGraphicsToLayer)  //When bufferPoints() resolves, the buffers are sent to addGraphicsToLayer() 
    .then(calculateAreas)  //When addGraphicsToLayer() resloves, the buffer geometries are sent to calculateAreas()     
    .then(sumArea, function(error){  //When calculateAreas() resolves, the areas are sent to sumArea()
      console.error('calculateAreas() promise rejected! Message: ', error);
    });           
    
  //Note how each function returns the value for the next function in the chain
  
  //buffers each point in the array by 1000 feet
  function bufferPoints(points) {
    return geometryEngine.geodesicBuffer(points, 1000, 'feet');
  }

  //Creates a new graphic for each buffer and adds it to the bufferLayer  
  function addGraphicsToBufferLayer(buffers) {
    buffers.forEach(function(buffer) {
      bufferLayer.add(new Graphic(buffer));
    });
    return buffers;
  }

  //Calculates the area of each buffer and adds it to a new array
  function calculateAreas(buffers) {
    return buffers.map(function(buffer) {
      return geometryEngine.geodesicArea(buffer, 'square-feet');
    });
  }

  //Calculates the sum of all the areas in the array returned from the previous then()
  function sumArea(areas) {
    var total = 0;
    areas.forEach(function(area) {
      total += area;
    });
    console.log("Total buffered area = ", total, " square feet.");
  }
</span></span>

2.3.4  API中使用promises的類

 ArcGIS API for JavaScript中的很多方法會返回promise。例如，在task和GeometryEngineAsync模塊中所有方法都會返回promise。

不僅函數返回promise，API中有些類在實例化時也可以使用promise。這意味着你可以在實例化時直接調用.then()。例如，因爲實例一個esri/Map是有promise性質的，當地圖實例化並且加載了所有的資源時，你可以直接調用map.then()在回調函數中執行代碼。

一旦你實例化下面的類就可以使用promise：

Map

All layers

MapView

SceneView

ViewAnimation

LayerView

示例：MapView

在這個例子中，我們在實例化一個MapView後使用.then()。view.then()回調函數中的代碼只有當view被加載完成之後纔會執行。在3.x版本的API中想實現相同的功能需要構造一個map.on(“load”,callback)事件來處理當地圖被加載完成後執行的回調函數。想看使用.then()真實的例子請參考 2Doverview map示例.

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">require(["esri/Map", "esri/views/MapView", "dojo/domReady!"], function(map, view){
  var map = new Map({
    basemap: 'streets'
  });
  
  var view = new MapView({
    container: "viewDiv",
    scale: 24000,
    map: map
  });
  
  view.then(function(instance){
    //do something here when the view finishes loading
  }, function(error){
    console.log('MapView promise rejected! Message: ', error);
  });
});
</span></span>

2.3.5 附加資源

你可以通過閱讀 MDN Promise文檔和 Dojo Promise文檔獲取有關promise的結構和用途更加深入的瞭解。以下以額外的微博鏈接解釋有關promise以及一些例子：

UnderstandingDeferreds and Promises in Dojo

DojoDeferreds and Promises

ChainingPromises

GeoNet- Keeping Promises

JavaScriptPromises

2.4模塊的升級

2.4.1 保持一致被修訂過的類

3.x name	4.x name
esri/map	esri/Map
esri/graphic	esri/Graphic
esri/tasks/query	esri/tasks/Query

2.4.2 類名縮短

3.x name	4.x name
ArcGISTiledMapServiceLayer	ArcGISTiledLayer

2.4.3 包的名稱更改

3.x name	4.x name
esri/dijit/	esri/widgets/

2.4.4 類的位置移動

3.x name	4.x name
esri/SpatialReference	esri/geometry/SpatialReference

2.4.5 新esri/identity/ 包

3.x name	4.x name
esri/IdentityManager	esri/identity/IdentityManager

 2.4.6移動到support文件夾下的類

Geometry類位於esri/geometry/support/中 

3.x name	4.x name
esri/geometry/webMercatorUtils	esri/geometry/support/webMercatorUtils

Task 類位於esri/tasks/support/中 

3.x name	4.x name
esri/tasks/AreasAndLengthsParameters	esri/tasks/support/AreasAndLengthsParameters
esri/tasks/BufferParameters	esri/tasks/support/BufferParameters
esri/tasks/DensifyParameters	esri/tasks/support/DensifyParameters
esri/tasks/DistanceParameters	esri/tasks/support/DistanceParameters
esri/tasks/FeatureSet	esri/tasks/support/FeatureSet
esri/tasks/GeneralizeParameters	esri/tasks/support/GeneralizeParameters
esri/tasks/LengthsParameters	esri/tasks/support/LengthsParameters
esri/tasks/OffsetParameters	esri/tasks/support/OffsetParameters
esri/tasks/ProjectParameters	esri/tasks/support/ProjectParameters
esri/tasks/Query	esri/tasks/support/Query
esri/tasks/RelationParameters	esri/tasks/support/RelationParameters
esri/tasks/StatisticDefinition	esri/tasks/support/StatisticDefinition
esri/tasks/TrimExtendParameters	esri/tasks/support/TrimExtendParameters

 

2.5創建一個2D地圖

與創建3D地圖過程類似，不再具體描述。

2.6創建一個3D地圖

如何創建一個帶有3D場景的地圖呢？按照下面的步驟你會創建一個3D視圖的例子。

2.6.1 引入ArcGIS API for JavaScript

首先,建立一個基本的HTML文檔，具體如下:

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Simple 3D Map</title>
</head>
</html>
</span></span>

在<head>標籤裏,參照ArcGIS API for JavaScript使用<script>和<link>標籤:

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;"><link rel="stylesheet" href="https://js.arcgis.com/4.0beta1/esri/css/esri.css"></p>
<script src="https://js.arcgis.com/4.0beta1/"></script>
</span></span>

<script>標籤裏從CDN中加載ArcGIS API for JavaScript代碼。當新版本的API發佈,版本號會更新。

<link>標籤參照esri.css樣式表,包含Esri的獨立部件和組件。關於這個樣式表的更多信息,請參閱CSS幫助主題。

2.6.2加載模塊

使用第二個<script>標籤加載API裏的相關功能模塊。使用下面的類加載：

esri/Map –用來創建一個地圖的相關類

esri/views/SceneView– 用來創建3D地圖的類

dojo/domReady! –保證DOM在執行代碼前是可用的

注：除了dojo /domReady !(！表示domReady是AMD裝載機插件),Dojo還提供了dojo/ready。domReady !與ready的區別是前者在DOM可用前等待引發需要提供的回調，而後者等待DOM做好準備並等待所有未完成的需要調用完成。有關更多信息,請參見Dojo的Dojo documentation /ready,一般情況下，dojo/domReady!都會用到。如果一個app使用了parseOnLoad: true, Dojo Dijits，Esri類庫的組件或自定義dijits，dojo/ready也應該被使用。

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;"><script>
require([
  "esri/Map",
  "esri/views/SceneView",
  "dojo/domReady!"
], function(Map, SceneView) {
  //code to create the map and view will go here
});
</script>
</span></span>

當創建一個簡單頁面或做測試時將JavaScript放在script標籤裏效果不錯，但是不適合大型應用程序，當構建更大的應用程序時，所有的JavaScript都應該放在單獨的.js文件中。

Dojo提供的global require()函數是用來加載模塊的。Esri的JavaScriptAPI 是在Dojo之上構建的，利用了Dojo模塊化的代碼庫，消除了跨瀏覽器之間的差異。

2.6.3 創建地圖

用Map類出來創建一個新的地圖，這是Map類的引用，是 esri/Map模塊的一個類。你可以指定地圖屬性，例如basemap,可以通過地圖對象來構造函數。

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">var map;
require([
  "esri/Map",
  "esri/views/SceneView",
  "dojo/domReady!"
], function(Map, SceneView) {
  map = new Map({
    basemap: "streets"
  });
});
</span></span>

除此之外底圖還有："streets ", "hybrid","topo", "gray", "dark-gray", "oceans","osm", "national-geographic".通過修改basemaps裏的選項來更換底圖。在地圖專題裏可以查看更多關於Map類的詳細信息。

2.6.4 創建一個3D視角

在HTML文件中，視圖節點作爲容器，允許用戶在頁面中查看地圖。通過一個對象的構造函數可以創建一個SceneView並設置其屬性。

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;">var map, view;
require([
  "esri/Map",
  "esri/views/SceneView",
  "dojo/domReady!"
], function(Map, SceneView) {
  map = new Map({
    basemap: "streets"
  });
  view = new SceneView({
    container: "viewDiv",  //reference to the DOM node that will contain the view
    map: map  //references the map object created in step 3
  });
});
</span></span>

在這個代碼片段中，我們在DOM節點中設置加載地圖容器的屬性名稱，map屬性參照在上一步中創建的map對象。

2.6.5 定義頁面內容

現在JavaScript需要創建一個地圖和視圖。下一步是添加相關的HTML代碼用來查看地圖。這個例子的HTML比較簡單：添加一個<body>標籤，用來定義在瀏覽器中可見的部分，在body裏定義一個<div>元素，用來創建視圖。

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;"><body>
  <div id="viewDiv"></div>
</body>
</span></span>

<div>裏"sceneView"的id是用來匹配在構造函數裏SceneView容器的屬性。

2.6.6 頁面的樣式

頁面內容的樣式放在<head>節點裏的<style>標籤下，爲了使地圖在瀏覽器窗口裏加載，在<style>標籤下添加下面的CSS樣式代碼：

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;"><style>
  html, body {
    padding: 0;
    margin: 0;
  }
</style>
</span></span>

現在已經利用ArcGIS API for JavaScript4.0構建了第一個3D的web應用程序，最後的HTML代碼如下：

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:12px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Simple 3D Map</title></p>
<style>
  html, body {
    padding: 0;
    margin: 0;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0beta1/esri/css/esri.css">
<script src="https://js.arcgis.com/4.0beta1/"></script>
<script>
var map, view;
require([
  "esri/Map",
  "esri/views/SceneView",
  "dojo/domReady!"
], function(Map, SceneView){
  map = new Map({
    basemap: "streets"
  });
  view = new SceneView({
    container: "viewDiv",  //reference to the scene div created in step 5
    map: map  //reference to the map object created before the scene
    scale: 50000000,  //sets the initial scale to 1:50,000,000
    center: [-101.17, 21,78]  //sets the center point of view with lon/lat
  });
});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>
</span></span>

運行效果如下：