使用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				
                                }*/
				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+"
";
					}
				//定义mouseClickHandler函数，触发click事件会调用此函数,弹出显示框
				function mouseClickHandler(event){ 
					closeInfoWin();		
					var contentHTML = "
"; 
					contentHTML += infoText;
					contentHTML += "
"; 		
					//初始化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);
}