這個例子很簡單,作為開學後(暴露出學生黨的本質)的開胃菜是再合适不過了。
不過,部落客提前警告一下:接下來的例子會相當的長、煩、難。我還會用“引用”-“函數參數骨架”-“逐級分解代碼”的模式,從上往下解讀一些更難的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。