天天看點

深入淺出 Javascript API(五)--Query & Find 查詢

    内容目錄:

1.Query查詢屬性資料(無地圖)

2.滑鼠移動顯示Query查詢結果

3.Find查詢地圖,并在頁面下方顯示相應屬性資料

1.僅用Query查詢屬性,不傳回地圖資訊,此時就不再需要建立esri.layers.ArcGISMapServiceLayer對象來處理地圖,但是需要引入"esri.tasks.query",并建立QueryTask對象:

深入淺出 Javascript API(五)--Query & Find 查詢

queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");

    webgis查詢一般涉決定傳回結果的參數,包括是否傳回幾何圖形,查詢的屬性字段,查詢方式(預設"SPATIAL_REL_INTERSECTS"),查詢Where語句等,例如:

深入淺出 Javascript API(五)--Query & Find 查詢

query = new esri.tasks.Query();

深入淺出 Javascript API(五)--Query & Find 查詢

query.returnGeometry = false;

深入淺出 Javascript API(五)--Query & Find 查詢

query.outFields = ["SQMI","STATE_NAME","SUB_REGION","POP2000","POP2007","MALES","FEMALES"];

    執行查詢,并将結果寫入回調函數showResults:

深入淺出 Javascript API(五)--Query & Find 查詢

function execute(stateName) {

深入淺出 Javascript API(五)--Query & Find 查詢

    query.text = stateName;

深入淺出 Javascript API(五)--Query & Find 查詢

    queryTask.execute(query,showResults);

深入淺出 Javascript API(五)--Query & Find 查詢

}

    所有的結果都會寫入到showResults參數Featureset對象中,周遊該對象得到我們想要的屬性結果。

深入淺出 Javascript API(五)--Query & Find 查詢

    查詢方式:

深入淺出 Javascript API(五)--Query & Find 查詢

2.滑鼠移動顯示Query查詢結果是常用的查詢方式之一,最重要的就是利用了Ajax異步傳輸,将少量的資訊顯示在一個Tip中,通路效率高,體驗較好。這裡我們可以決定,是預設指定一圖層區域要素進行hover查詢,還是滑鼠點選要查詢的要素後,再hover查詢,以實作前者為例,其他方式以此類推。

    查詢功能主要是這幾行代碼完成:

深入淺出 Javascript API(五)--Query & Find 查詢

var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

深入淺出 Javascript API(五)--Query & Find 查詢

var query = new esri.tasks.Query();

深入淺出 Javascript API(五)--Query & Find 查詢

query.returnGeometry = true;

深入淺出 Javascript API(五)--Query & Find 查詢

query.outFields = ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"];

深入淺出 Javascript API(五)--Query & Find 查詢

query.where = "STATE_NAME = 'South Carolina'";

    "query.text"和"query.where"差別在于,前者是通過"like"方式執行where查詢,後者是直接寫SQL語句。

    TIP UI是一個InfoWindow

深入淺出 Javascript API(五)--Query & Find 查詢
深入淺出 Javascript API(五)--Query & Find 查詢

var infoTemplate = new esri.InfoTemplate();

深入淺出 Javascript API(五)--Query & Find 查詢

infoTemplate.title = "${NAME}";

深入淺出 Javascript API(五)--Query & Find 查詢

infoTemplate.content = "<b>2000 Population: </b>${POP2000}<br/>"

深入淺出 Javascript API(五)--Query & Find 查詢

 + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>"

深入淺出 Javascript API(五)--Query & Find 查詢

 + "<b>2007 Population: </b>${POP2007}<br/>"

深入淺出 Javascript API(五)--Query & Find 查詢

 + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI}";

深入淺出 Javascript API(五)--Query & Find 查詢

map.infoWindow.resize(205,125);

深入淺出 Javascript API(五)--Query & Find 查詢

    滑鼠移動到指定區域後,通過對滑鼠onmousemove和onmouseout事件來顯示或隐藏查詢TIPs

深入淺出 Javascript API(五)--Query & Find 查詢
深入淺出 Javascript API(五)--Query & Find 查詢

dojo.connect(map.graphics, "onMouseOver", function(evt) {

深入淺出 Javascript API(五)--Query & Find 查詢

    var content = evt.graphic.getContent();

深入淺出 Javascript API(五)--Query & Find 查詢

    map.infoWindow.setContent(content);

深入淺出 Javascript API(五)--Query & Find 查詢

    var title = evt.graphic.getTitle();

深入淺出 Javascript API(五)--Query & Find 查詢

    map.infoWindow.setTitle(title);

深入淺出 Javascript API(五)--Query & Find 查詢

    evt.graphic.setSymbol(highlightSymbol);

深入淺出 Javascript API(五)--Query & Find 查詢

    map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));

深入淺出 Javascript API(五)--Query & Find 查詢

});

深入淺出 Javascript API(五)--Query & Find 查詢
深入淺出 Javascript API(五)--Query & Find 查詢

dojo.connect(map.graphics, "onMouseOut", function(evt) {

深入淺出 Javascript API(五)--Query & Find 查詢

    map.infoWindow.hide();

深入淺出 Javascript API(五)--Query & Find 查詢

    evt.graphic.setSymbol(symbol);

深入淺出 Javascript API(五)--Query & Find 查詢
深入淺出 Javascript API(五)--Query & Find 查詢
深入淺出 Javascript API(五)--Query & Find 查詢

3.Find 查詢,和Query功能類似,但使用的REST服務不同,Query需要指定具體的REST圖層服務,如"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services /Demographics/ESRI_Census_USA/MapServer/3",而Find僅需提供目前地圖服務"http: //sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty /ESRI_StatesCitiesRivers_USA/MapServer",然後通過屬性來控制對哪個圖層進行查找。

深入淺出 Javascript API(五)--Query & Find 查詢

findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");

深入淺出 Javascript API(五)--Query & Find 查詢

findParams = new esri.tasks.FindParameters();

深入淺出 Javascript API(五)--Query & Find 查詢

findParams.returnGeometry = true;

深入淺出 Javascript API(五)--Query & Find 查詢

findParams.layerIds = [0,1,2];

深入淺出 Javascript API(五)--Query & Find 查詢

findParams.searchFields = ["CITY_NAME","NAME","SYSTEM","STATE_ABBR","STATE_NAME"];

    這樣做的好處是,可以友善的對多個圖層進行查詢,js代碼隻需要設定layerIds,在此之前添加"dojo.require("esri.tasks.find");"。頁面下方顯示查詢結果,通過Ajax重新整理,這裡可以利用dojox.grid 完成這個過程,Find搜尋隻能用like方式,并且不區分大小寫,這是和Query另外一個差別。

深入淺出 Javascript API(五)--Query & Find 查詢

本文轉自Flyingis部落格園部落格,原文連結:http://www.cnblogs.com/flyingis/archive/2008/07/29/1255373.html,如需轉載請自行聯系原作者

繼續閱讀