ArcGIS JavaScript API 4.0beta 3


12月18日新版ArcGIS JavaScript API 4.0beta3上線,相比beta2在最新的4.0beta版中並沒有特別大的功能增加,但是從這個版本的我們可以感受到爲下一個beta版做的鋪墊。組件更加友好,對於第三方JS框架的支持也越來越好。雖然現在功能上還是比較弱,但是整體上來說4.x版本的JS API在架構的性能上會有一個大的提升,在易用性和兼容性上也會大大增強。相比4.0beta2,在beta3中的新特性主要表現在以下幾個方面。



1 更加友好的組件開發

所有組件在4.0API中被重新構建以提高他們的擴展和定製能力,現在每個已有的組件的展現都是與屬性、方法和數據相獨立的。

這種將核心邏輯代碼與組件的展現相分離的方式使得每個小部件可以使用其他框架和庫(諸如Bootstrap、React和JQuery等)進行深度定製樣式。4.0的API是基於Dojo,但是其組件並不是完全依賴於dojo的dijit框架,小組件的展示基於dijit框架,但是核心邏輯代碼並不是。因此這些小組件也可以被修改爲使用自定義的CSS和本機的HTML。

每個小組件的屬性和方法現在使用viewModel來處理,這是一個基於Accessor的類。由於這個類擴展了Accessor小組件中的所有屬性可以被設置爲使用概述頁面的屬性頁。

這種設計允許開發人員使用第三方框架創建新的或者修改現有的小組件。小部件的展現和邏輯代碼的分離意味着開發人員可以使用原有的邏輯代碼而不使用原有的UI界面。

<span style="font-family:Microsoft YaHei;font-size:14px;">require([
    "esri/widgets/Search",
    "esri/widgets/Search/SearchViewModel",
    "dojo/domReady!"
], function(Search, SearchVM) {
    ...
    var searchWidget = new Search({
        //通過 viewModel設置屬性改變最終的展現樣式   
        viewModel: new SearchVM({
            view: view //在 MapView中實例化
        })
    }, "searchDiv");
    ...
});
</span>

注意:小組件的設計是一個還在進行中的工作,因此在beta版中可能發生變化。


2 更加一致的API來處理渲染

現在SimpleRenderer、UniqueValueRendererClassBreaksRenderer擴展了Accessor類。渲染器的所有屬性可以直接在構造函數中設置對象或直接在實例化類時添加。

例如,在4.0beta2中聲明一個單一值渲染(UniqueValueRenderers)使用如下方式:

<span style="font-family:Microsoft YaHei;font-size:14px;">var defaultSym = new SimpleFillSymbol();
var renderer = new UniqueValueRenderer(defaultSym, "myField");
</span>

4.0beta3中你可以將相同的構造器直接寫入一個構造函數對象中:

<span style="font-family:Microsoft YaHei;font-size:14px;">var renderer = new UniqueValueRenderer({
    defaultSymbol: defaultSym,
    attributeField: "myField"
});
</span>

任何屬性都可以在實例化渲染類之後再添加:

<span style="font-family:Microsoft YaHei;font-size:14px;">renderer.attributeField2 = "mySecondField";
renderer.attributeField3 = "myThirdField";
</span>



3 新的佔位符語法

<span style="font-family:Microsoft YaHei;font-size:14px;">// 舊的佔位符 (帶一個美元符): 
${placeholder}
// 新的佔位符 (不帶美元符): 
{placeholder}
</span>

這是我認爲beta3中最大的改變,佔位符一直是JS API所支持的,這可以在提前構建的模板中佔據字符的空間,爲後續的數據填充提供方便。這種佔位符之前廣泛應用在諸如彈出窗,搜索框, WebTiledLayer等類中。

新API爲了避免與ES6中模板字符串使用$ {佔位符}的語法衝突。因此採取了這種去掉$的做法。

例如在WebTiledLayer中

舊的寫法是:

<span style="font-family:Microsoft YaHei;font-size:14px;">var tiledLayer = new WebTiledLayer({
    urlTemplate: "http://${subDomain}.tile.stamen.com/toner/${level}/${col}/${row}.png",
    subDomains: ["a", "b", "c", "d"],
    copyright: "Copyright here ..."
});
</span>

現在新的寫法是:

<span style="font-family:Microsoft YaHei;font-size:14px;">var tiledLayer = new WebTiledLayer({
    urlTemplate: "http://{subDomain}.tile.stamen.com/toner/{level}/{col}/{row}.png",
    subDomains: ["a", "b", "c", "d"],
    copyright: "Copyright here ..."
});
</span>



4 新增加的類

PortalUser

繼承自Accessor類,用於給用戶本身和用戶作所在組的管理員返回註冊用戶的詳細信息。具體請查看ArcGIS Portal API REST documentation for the user 

PortalFolder

繼承自Accessor類,用於提供組織門戶的內容列表。


5新增加的例子

OAuth 2.0授權online賬戶的使用

利用OAuth 2.0機制第三方應用可以獲取online部分用戶信息。



類似於通過QQ登錄訪問第三方的網站一個意思。



6 bug的修復

修復了矢量切片圖層( Vector Tile Layer)中空白的地圖中出現間歇性的故障錯誤。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章