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

這個例子很簡單，作為開學后（暴露出學生黨的本質）的開胃菜是再合適不過了。

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

現在上課！

---

空間查詢，是GIS的一個重頭戲，除了基礎定義（坐標系統、投影、符號等）、數據准備外，緊接着就是空間查詢和下一章的空間分析。

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

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

舉例：

在搜索小部件中輸入上海，結果就會以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：

Search是個類，繼承自Accessor類。

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

它顯示為：

它的屬性和方法很多，列舉幾個：

屬性：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。