使用Supermap iClient for javascript查詢多邊形並添加marker和信息框

根據屬性查詢出對應的要素是一個比較經典和實用的功能，下面就使用超圖的iClient for javascript來實現二維地圖上的這個功能。

預期效果：在文本框輸入某個值，點擊查詢，則進行查詢，並在符合要求的要素上添加一個marker點，點位於該要素質心，並縮放到該要素。點擊marker可以顯示該要素的屬性信息。

前端文本框id爲sqlText，button的點擊事件爲queryBySQL()。
輸入如圖的查詢語句就能查詢到對應的要素。因爲圖文解說看起來不直觀，直接上代碼，解說文字都在註釋裏。

function queryBySQL(){
	queryLayer.removeAllFeatures();
	map.addLayer(queryLayer);
	var queryParam,queryBySQLParams,queryBySQLService;
	var sql=document.getElementById("sqlText").value;
	//FilterParameter必設name（查詢地圖圖層名），attribute（SQL條件語句）也爲必設,sql形式爲“字段名=字段值”

	queryParam = new SuperMap.REST.FilterParameter({
		name:"這裏放圖層名",//圖層名可以在桌面端datamanager裏查看
		attributeFilter:sql,
		fields:["OBJECTID","SHAPE_LENG","SHAPR_AREA"]//這裏是三個要查詢的字段，也是在datamanager裏查看
	}),
	//QueryBySQLParameters 參數必設	queryParams
	queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
		queryParams: [queryParam]
	}),
	//使用QueryBySQLService進行查詢，返回一個結果集
	queryBySQLService = new SuperMap.REST.QueryBySQLService(dlgShuJuTu, {
		eventListeners: {"processCompleted": processCompleted, "processFailed": processFailed}});
	queryBySQLService.processAsync(queryBySQLParams);
}
function processCompleted(queryEventArgs){
	var result = queryEventArgs.result;
	if(result&&result.totalCount>0){
		//對這個結果集進行遍歷
		for(var i=0;i<result.recordsets.length;i++){
			for(var k=0;k<result.recordsets[i].features.length;k++){
				//獲取到一個要素
				var feature = new SuperMap.Feature.Vector();
				feature = result.recordsets[i].features[k];
				/*使該要素變成藍色，style = {
                              strokeColor: "#333333",
                              strokeWidth: 2,
                              pointerEvents: "visiblePainted",
                              fillColor: "#304DBE",
                              fillOpacity: 0.8				
                                }*/
				feature.style =	style;
				queryLayer.addFeatures([feature]);
				//添加marker
				var size = new SuperMap.Size(44,33);
				var offset = new SuperMap.Pixel(-(size.w/2), -size.h);
				icon = new SuperMap.Icon('img/marker.png', size, offset);
				//獲取到這個要素的中心點
				var point = feature.geometry.getCentroid();
				marker =new SuperMap.Marker(new SuperMap.LonLat(point.x,point.y),icon);
				//添加標記點到圖層上，添加圖層到地圖上
				map.addLayer(markerLayer)
				markerLayer.addMarker(marker);  
				marker.events.on({"click":mouseClickHandler,"touchstart":mouseClickHandler});
				//縮放到圖層
				//通過getBounds獲取到該要素邊界
				var bounds = feature.geometry.getBounds();
				//獲取該要素邊界x軸和y軸的最大最小值
				var xMax=bounds.right;
				var yMax=bounds.top;
				var extentBounds=new SuperMap.Bounds();
				//縮放地圖的範圍，爲了美觀設置爲，邊界到中心點距離的兩倍
				extentBounds.right=point.x+(xMax-point.x)*2;
				extentBounds.left=point.x-(xMax-point.x)*2;
				extentBounds.top=point.y+(yMax-point.y)*2;
				extentBounds.bottom=point.y-(yMax-point.y)*2;
				map.zoomToExtent(extentBounds,true);
				//點擊顯示信息框
				var infowin = null;
				var fieldName,fieldValue,infoText="屬性：";
				//看結果返回了幾個字段
				var intFieldCount = result.recordsets[i].fields.length;
				//把每個字段名和字段值放在文本里
				for (var n = 0;n < intFieldCount;n++)
					{ 										
						fieldName = result.recordsets[i].fields[n];
						fieldValue=feature.attributes[fieldName];
						infoText+=fieldName+":"+fieldValue+"<br/>";
					}
				//定義mouseClickHandler函數，觸發click事件會調用此函數,彈出顯示框
				function mouseClickHandler(event){ 
					closeInfoWin();		
					var contentHTML = "<div style='width:80px; font-size:12px;font-weight:bold ; opacity: 0.8'>"; 
					contentHTML += infoText;
					contentHTML += "</div>"; 		
					//初始化FramedCloud類
					framedCloud = new SuperMap.Popup.FramedCloud(
					    "chicken", 
			            marker.getLonLat(),
						null,
						contentHTML,
						icon,
			            true,
						null,
			            true
					);
					infowin = framedCloud;
			        map.addPopup(framedCloud);
				}	
				
				function closeInfoWin(){
			        if(infowin){
			            try{
			                infowin.hide();
			                infowin.destroy();
			            }
			            catch(e){}
			        }
			    }
			}
		}
	}
}
function processFailed(e) {
	alert(e.error.errorMsg);
}