openlayers入门开发系列之地图属性查询篇

本篇的重点内容是利用openlayers实现地图属性查询功能，效果图如下：

image image

实现思路：

• 模糊查询点击事件

//模糊查询
$("#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') + '"   onclick="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入门开发系列之地图空间查询篇

GIS之家作品：GIS之家
GIS之家在线咨询：在线咨询