1. 程式人生 > >ArcGIS 實現框選區域查詢要素後,要素點選彈出框

ArcGIS 實現框選區域查詢要素後,要素點選彈出框

      提醒說明:本文用了兩種方法,建議直接看第二種,因為第二種比第一種靠譜簡單;   

   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,就可以在上面的方法的回撥函式中執行