根據屬性查詢出對應的要素是一個比較經典和實用的功能,下面就使用超圖的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);
}