天天看點

ArcGIS API for JavaScript 4.2學習筆記[18] 搜尋小部件

這個例子很簡單,作為開學後(暴露出學生黨的本質)的開胃菜是再合适不過了。

不過,部落客提前警告一下:接下來的例子會相當的長、煩、難。我還會用“引用”-“函數參數骨架”-“逐級分解代碼”的模式,從上往下解讀一些更難的AJS代碼。

現在上課!

空間查詢,是GIS的一個重頭戲,除了基礎定義(坐标系統、投影、符号等)、資料準備外,緊接着就是空間查詢和下一章的空間分析。

對于AJS的小部件,我們已經接觸了兩個了,如2D地圖中的指北針和上一章的彈窗(Popup)。這個例子也是小部件的應用,名為:“Search”。

本例是最普通的空間查詢,即在3D地圖中搜尋地物。

舉例:

ArcGIS API for JavaScript 4.2學習筆記[18] 搜尋小部件

在搜尋小部件中輸入上海,結果就會以goTo()動畫跳轉到搜尋結果中。

給出引用

require(
    [
      "esri/Map",
      "esri/views/SceneView",
      "esri/widgets/Search",
      "dojo/domReady!"
    ], 
    function(Map, SceneView, Search) {
    }
);      

可以看到,使用了widgets/Search引用。

函數參數骨架

function(Map, SceneView, Search){
    var map = Map({...});
    var view = SceneView({...});
    var searchWidget = new Search({...});
    view.ui.add(searchWidget, {...});
}      

是不是很簡單?

在正常的map和view執行個體化後,執行個體化一個Search對象,名為searchWidget,然後在view.ui屬性中添加即可,空間搜尋原來這麼容易?

我們展開Search({...})和add()中的内容。

var searchWidget = new Search({
    view: view
});

view.ui.add(searchWidget, {
    position: "top-left",
    index: 0
});      

要不要太簡單?

Search()中是把view屬性綁定到上方的view對象,add()中是确定搜尋小部件的位置資訊。

于是這個例子就完了。

查閱API:

ArcGIS API for JavaScript 4.2學習筆記[18] 搜尋小部件

Search是個類,繼承自Accessor類。

它提供了為地圖搜尋地物的功能,對于要素圖層,用空間查詢更佳。

它顯示為:

ArcGIS API for JavaScript 4.2學習筆記[18] 搜尋小部件

它的屬性和方法很多,列舉幾個:

屬性:view、popupTemplate、sources、viewModel、container,等等。

方法:on()、search()、clear()、destroy(),等等。

可以看出,Search類支援定義彈窗模闆。

view.ui

ui是DefaultUI類的屬性,在MapView的幫助文檔中,查閱得到常用的方法是:

add()、remove()、move()、empty()。

而DefaultUI類繼承自UI類,UI類繼承自Accessor類。

add()方法接受兩個參數,前一個參數是html元素(組),這裡是searchWidget;後一個參數是小部件的位置,有兩個可選參數:position和index。

繼續閱讀