• 查询功能，参考官网示例：WFS 和 WFS - GetFeature，前者通过extent获取内容，后者通过filter获取。
• 拉框，利用Draw组件绘制Box实现

WFS实现

• 引入组件

import GeoJSON from 'ol/format/GeoJSON';
import {bbox as bboxStrategy} from 'ol/loadingstrategy';
import VectorSource from 'ol/source/Vector';
import {Stroke, Style} from 'ol/style';

• 实现方法

  /**主要参数设置**/
  var pGeoserverPort = 'https://ahocevar.com/';
  var pTypeName = 'osm:water_areas'; //命名空间:图层名
  var pSrsName = 'EPSG:3857'; //坐标系

  queryByDraw(fea) {
    return new Promise((resolve, reject) => {
      var queryUrl = pGeoserverPort  + 'geoserver/wfs?' +
        'version=1.1.0&request=GetFeature&typename=' + pTypeName  +
        '&srsname=' + pSrsName  + '&' +
        'bbox=' + fea.getGeometry().getExtent().join(',') + ',' + pSrsName  + '&outputFormat=application/json';
      //服务查询
      axios({
        url: queryUrl
      }).then((res) => {
        this.queryInfo = res.data.features;
        resolve(res.data.features);
      });
    });
  },

WFS - GetFeature实现

• 引入组件

import {
  equalTo as equalToFilter,
  intersects
} from 'ol/format/filter';
import {WFS, GeoJSON} from 'ol/format';

• 实现方法

//创建属性过滤器 可以过滤字段 添加%%可以模糊查询
var fieldFilter = equalToFilter('字段名', '字段值')；
//创建空间过滤器 可以查询特定区域下的数据 即拉框查询
 var areaFilter =  intersects(
     geometryName,
     geometry
  );
// generate a GetFeature request
var featureRequest = new WFS().writeGetFeature({
  srsName: 'EPSG:3857',
  featureNS: 'http://openstreemap.org',
  featurePrefix: 'osm',
  featureTypes: ['water_areas'],
  outputFormat: 'application/json',
  filter: areaFilter
});

// then post the request and add the received features to a layer
fetch(pGeoserverPort +'geoserver/wfs', {
  method: 'POST',
  body: new XMLSerializer().serializeToString(featureRequest)
}).then(function(response) {
  return response.json();
}).then(function(json) {
  var features = new GeoJSON().readFeatures(json);
  vectorSource.addFeatures(features);
  map.getView().fit(vectorSource.getExtent());
});

• featureNS:必须为创建工作区时的命名空间URI
• featurePrefix: 命名空间即工作区的名称
• featureTypes: 查询图层名称
• intersects中的参数geometryName不能任意填写，而是必须填写WFS相关数据源中空间属性字段名称，即数据源geometry类型对应的字段

封装SpaceQuery.js

import {
    intersects
} from 'ol/format/filter';
import { WFS, GeoJSON } from 'ol/format';
import axios from 'axios'
export default {
    typeName: 'cite:point',//工作区:图层名
    srsname: 'EPSG:4326',//坐标系
    featureNS: 'http://www.opengeospatial.net/cite',//命名空间URI
    featurePrefix: 'cite',//工作区
    featureTypes: 'point',//图层名
    geometryName: 'the_geom',
    queryByDraw(fea) {
        /**主要参数设置**/
        var pTypeName = this.typeName;
        var pSrsName = this.srsname;
        return new Promise((resolve) => {
            var queryUrl = '/geoserver/wfs?' +
                'version=1.1.0&request=GetFeature&typename=' + pTypeName +
                '&srsname=' + pSrsName + '&' +
                'bbox=' + fea.getGeometry().getExtent().join(',') + ',' + pSrsName + '&outputFormat=application/json';
            //服务查询
            axios({
                url: queryUrl
            }).then((res) => {
                resolve(res.data.features);
            });
        });
    },
    queryByWFSFeature(geometry) {
        //创建空间过滤器 可以查询特定区域下的数据 即拉框查询
        var areaFilter = intersects(
            this.geometryName,
            geometry
        );
        // generate a GetFeature request
        var featureRequest = new WFS().writeGetFeature({
            srsName: this.srsname,
            featureNS: this.featureNS,
            featurePrefix: this.featurePrefix,
            featureTypes: [this.featureTypes],
            outputFormat: 'application/json',
            filter: areaFilter
        });

        // then post the request and add the received features to a layer
        return new Promise(resolve => {
            fetch('/geoserver/wfs', {
                method: 'POST',
                body: new XMLSerializer().serializeToString(featureRequest)
            }).then(function (response) {
                return response.json();
            }).then(function (json) {
                var features = new GeoJSON().readFeatures(json);
                resolve(features);
            });
        })

    }
}

使用

import Query from "@/views/js/SpaceQuery";
Draw.addInteraction("Box", feature => {
    Query.queryByDraw(feature).then(res => {
          Draw.removeFeature();
          //查询到的结果res
          console.log(res);
     });
     //Query.queryByWFSFeature(feature.getGeometry());
 });
Draw.stop();

SpaceQuery.js中queryByDraw和queryByWFSFeature都可以实现拉框查询，两种方法都可以用

• 调用geoserver的wfs接口查询时，出现跨域问题，通过在配置文件vue.config.js中设置代理proxy解决

   devServer: {
        open: false,
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: {
            '/geoserver': {
                target: 'http://192.168.0.106:8080/geoserver', //设置你调用的接口域名和端口号 别忘了加http
                changeOrigin: true,
                pathRewrite: {
                    '^/geoserver': '/'
                }
            }
        },
        before: app => { }
    }