openlayers4 入门开发系列之地图空间查询篇（附源码下载）

前言

openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。

openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：

• geoserver 安装部署步骤
• geoserver 发布地图服务 WMS
• geoserver 发布地图服务 WMTS
• geoserver 集成以及部署 arcgis server 瓦片数据

内容概览

1.基于 openlayers4 实现地图空间查询
2.源代码 demo 下载

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

image

实现思路

• 框选工具（多边形以及矩形）

//多边形
$("#polygonButton").bind("click", function () {
            DCI.SpatialQuery.clearMap();
            DCI.SpatialQuery.InitState();
            DCI.SpatialQuery.addInteraction("Polygon");
})
//矩形
$("#rectangleButton").bind("click", function () {
            DCI.SpatialQuery.clearMap();
            DCI.SpatialQuery.InitState();
            DCI.SpatialQuery.addInteraction("Box");
})

addInteraction:function(value){
        var geometryFunction;
        switch (value) {
        case "Box": 
            value = 'Circle';
            geometryFunction = ol.interaction.Draw.createBox();
            break;
        case "Polygon": 
            value = 'Polygon';
            break;
        }
        DCI.SpatialQuery.draw = new ol.interaction.Draw({
            source: DCI.SpatialQuery.source,
            type: value,
            geometryFunction: geometryFunction
          });
        DCI.SpatialQuery.map.addInteraction(DCI.SpatialQuery.draw);
        DCI.SpatialQuery.draw.on('drawend',function(evt){
            DCI.SpatialQuery.clearMap();
            DCI.SpatialQuery.drawEndPlot(evt.feature);
        });     

}

• 框选绘制完成，进行 wfs 进行空间查询

/**
 * 地图点击完成后函数
 * **/
drawEndPlot:function(feature){
        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.intersects(bxmap.config.MapConfig.wfs.geometryName, feature.getGeometry(), bxmap.config.MapConfig.wfs.srsName)
        });
        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');
                      innerStr.push('
');
                      innerStr.push('
');
                      innerStr.push('');
                      innerStr.push('
');
                      innerStr.push('
');
                      innerStr.push('' + features[i].get('名称') + '
');
                      innerStr.push('
');
                      innerStr.push('
');
                      innerStr.push('' + features[i].get('编号') + '
');
                      innerStr.push('
');
                      innerStr.push('
');
                      innerStr.push('' + features[i].get('类别') + '
');
                      innerStr.push('
');
                      innerStr.push('
');
                      innerStr.push('' + features[i].get('面积') + '
');
                      innerStr.push('
');
                      innerStr.push('
');
                      innerStr.push('
')
                      innerStr.push('
');
                      innerStr.push('

'); } $("#showLists").html(innerStr.join('')); } else{ $("#showLists").html("框选查询不到相关结果"); } }); }

• 点击查询结果列表，地图定位

更多的详情见：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家作品：GIS之家
GIS之家源码咨询：咨询模式