生活随笔
收集整理的這篇文章主要介紹了
openlayers入门开发系列之地图属性查询篇
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本篇的重點(diǎn)內(nèi)容是利用openlayers實(shí)現(xiàn)地圖屬性查詢功能，效果圖如下：
實(shí)現(xiàn)思路：
//模糊查詢
$("#swatchQuery").bind("click",
function () {var keyword = $("#skeyword"
).val();if (keyword == "" || keyword ==
undefined) {alert("請(qǐng)輸入要查找的內(nèi)容!"
);return;}DCI.SpatialQuery.queryByAttribute(keyword);}); - 地圖屬性查詢核心函數(shù)queryByAttribute
/**根據(jù)屬性查詢地圖*@attribute**/queryByAttribute:function(keyword){var featureRequest =
new ol.format.WFS().writeGetFeature({srsName: bxmap.config.MapConfig.wfs.srsName,featureNS: bxmap.config.MapConfig.wfs.featureNS,featurePrefix: bxmap.config.MapConfig.wfs.featurePrefix,featureTypes: bxmap.config.MapConfig.wfs.featureTypes,outputFormat: bxmap.config.MapConfig.wfs.outputFormat,filter:ol.format.filter.like(bxmap.config.MapConfig.wfs.attrName, '*'+keyword+'*')
//todo 條件查詢過濾
});fetch(bxmap.config.MapConfig.geoserver_url+
bxmap.config.MapConfig.wfs.url, {method: 'POST'
,body: new XMLSerializer().serializeToString(featureRequest)}).then(function(response) {return response.json();}).then(function(json) {var features =
new ol.format.GeoJSON().readFeatures(json);if(features && features.length>0
){if(DCI.SpatialQuery.spatialLayer)DCI.SpatialQuery.spatialLayer.getSource().clear();if(DCI.SpatialQuery.pointLayer)DCI.SpatialQuery.pointLayer.getSource().clear();DCI.SpatialQuery.spatialSource.addFeatures(features);DCI.SpatialQuery.map.getView().fit(DCI.SpatialQuery.spatialSource.getExtent());$("#spatial-total").html("框選查詢共"+features.length+"條結(jié)果"
);var innerStr =
[];for(
var i=0;i<features.length;i++
){var feature =
features[i];//面取中心點(diǎn)var pointGeometry=DCI.SpatialQuery.creatPointGeometry(feature.getGeometry().getExtent());
//面取中心點(diǎn)var attribute =
{"OBJECTID":features[i].get('OBJECTID'
),"名稱":features[i].get('名稱'
),"編號(hào)":features[i].get('編號(hào)'
),"類別":features[i].get('類別'
),"面積":features[i].get('面積'
),};var feature=
new ol.Feature({geometry: pointGeometry,attribute:attribute,id:features[i].get('OBJECTID'
),type:"point"
});DCI.SpatialQuery.pointLayer.getSource().addFeature(feature);innerStr.push('<div class="left_list_li_box" id="' + features[i].get('OBJECTID') + '" οnclick="DCI.SpatialQuery.locationToMap(\'' + features[i].get('OBJECTID') + '\')" >'
);innerStr.push('<div class="left_list_li_box_top">'
);innerStr.push('<div class="left2_box2">'
);innerStr.push('<img class="list_poi_marker" style="" src="' + getRootPath() + 'Content/images/index/poiLocation.png"></img>'
);innerStr.push('<div class="left_list_li1">'
);innerStr.push('<p>'
);innerStr.push('<a style="text-decoration:none">' + features[i].get('名稱') + '</a><br/>'
);innerStr.push('</p>'
);innerStr.push('<p>'
);innerStr.push('<a style="text-decoration:none;color:#555;">' + features[i].get('編號(hào)') + '</a><br/>'
);innerStr.push('</p>'
);innerStr.push('<p>'
);innerStr.push('<a style="text-decoration:none;color:#555;">' + features[i].get('類別') + '</a><br/>'
);innerStr.push('</p>'
);innerStr.push('<p>'
);innerStr.push('<a style="text-decoration:none;color:#555;">' + features[i].get('面積') + '</a><br/>'
);innerStr.push('</p>'
);innerStr.push('</div>'
);innerStr.push('</div>'
)innerStr.push('</div>'
);innerStr.push('</div>'
);}$("#showLists").html(innerStr.join(''
));}else{$("#showLists").html("框選查詢不到相關(guān)結(jié)果"
); }}); }, bxmap.config.MapConfig =
{ "wfs"
:{"url":"/wfs"
,"featureNS":"http://www.anjiSYS.com"
,"srsName":"EPSG:3857"
,"featurePrefix":"anjiSYS"
,"featureTypes":["anjiGN"
],"geometryName":"the_geom"
,"attrName":"名稱"
,"outputFormat":"application/json"
}
} 地圖和搜索結(jié)果的交互，展示氣泡窗口內(nèi)容見：openlayers入門開發(fā)系列之地圖空間查詢篇
總結(jié)
以上是生活随笔為你收集整理的openlayers入门开发系列之地图属性查询篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
