本篇的重点内容是利用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入门开发系列之地图空间查询篇