使用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 参数必设queryParamsqueryBySQLParams = 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]);//添加markervar 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);}