本篇的重點內容是利用openlayers實現地圖屬性查詢功能，效果圖如下：

實現思路：

• 模糊查詢點擊事件

//模糊查詢 $("#swatchQuery").bind("click", function () {var keyword = $("#skeyword").val();if (keyword == "" || keyword == undefined) {alert("請輸入要查找的內容!");return;}DCI.SpatialQuery.queryByAttribute(keyword);});

• 地圖屬性查詢核心函數queryByAttribute

/**根據屬性查詢地圖*@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+"條結果");var innerStr = [];for(var i=0;i<features.length;i++){var feature = features[i];//面取中心點var pointGeometry=DCI.SpatialQuery.creatPointGeometry(feature.getGeometry().getExtent());//面取中心點var attribute = {"OBJECTID":features[i].get('OBJECTID'),"名稱":features[i].get('名稱'),"編號":features[i].get('編號'),"類別":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('編號') + '</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("框選查詢不到相關結果"); }}); },

• 屬性查詢條件配置文件說明

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"} }

地圖和搜索結果的交互，展示氣泡窗口內容見：openlayers入門開發系列之地圖空間查詢篇

總結

以上是生活随笔為你收集整理的openlayers入门开发系列之地图属性查询篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。