ArcGIS 實現框選區域查詢要素後,要素點選彈出框
阿新 • • 發佈:2019-01-06
提醒說明:本文用了兩種方法,建議直接看第二種,因為第二種比第一種靠譜簡單;
2015.11.12 在webGis 專案的開發中,當前已經實現使用QueryTask來針對要素進行NAME,空間的查詢之後,並使用Symbol將要素顯示出來在圖上,如下圖所示
在專案的實際需要中,我們需要點選上圖要素的時候,彈出帶有easyui屬性表格的easyui Window,Arcgis api for javascript 在要素查詢的時候,初始化了一個infoTemplate
當我們點選的時候彈出infoTemplate,如下圖:
這個事infoTemplate,並不是我們所需要的easyui window,要實現我們的需求,我們最好使能獲取滑鼠點選要素的事件,這樣子是比較快,但是找了很久都沒有找出來,
由於當時專案很趕,就先放一邊,自定義一個table去顯示我們需要的資料 ,今早空下來,重新想了個辦法:
1.寫了一個map的點選的監聽事件
2.在查詢的時候,將查詢的結果放到一個變數當中,設定為全域性變數
3.獲取點選的經緯度,並與儲存的結果資料的經緯度比較,找出距離最小的距離以及相應的點的下標
4.彈出easyui window,根據下標獲取相應的資料,顯示到彈出框內的表格中
相關程式碼:
map.on("click",function(evt) { var clickPoint=evt.mapPoint; var mapClick_X=clickPoint.x; var mapClick_Y=clickPoint.y; $('#detailWin').window('close'); if(layerResults){ //先得到哪一個的點距離滑鼠點選的位置最近,返回點的索引值 var index=findMinDistance(mapClick_X,mapClick_Y); //index=-1表示滑鼠點選的位置距離點的距離長度太遠 if(index== -1){ return; } $('#detailWin').window({ left:evt.pageX+10, top:evt.pageY+10, title:layerResults.features[index].attributes.NAME }); $('#detailWin').window('open'); }else{ return; } //將目標點的資料顯示在屬性表格中 $('#testTable').propertygrid({ columns:[[ { title: "名稱", field: "name",width:70 }, { title: "值", field: "value",width:180 } ]], data:[ {"name":"名稱:","value":layerResults.features[index].attributes.NAME,"editor":"text"}, {"name":"類別:","value":layerResults.features[index].attributes.LB,"editor":"text"}, {"name":"經度:","value":layerResults.features[index].attributes.JD,"editor":"text"} ], showGroup:false }); })
效果圖:
寫於2015-12-11,經過公司的大神提醒,上面的方法不好,以下是比較好用而且簡單的方法:
假設要素服務的URL地址是127.0.0.1:1234/REST/services/0
var featureLayer=new esri.layers.Feature(URL);
featureLayer.on("click",function(evt)){
}
這邊的evt.graphic.attributes就包含有該要素的屬性資訊,如果要彈出easyui的window,就可以在上面的方法的回撥函式中執行