• 查詢功能，參考官網(wǎng)示例：WFS 和 WFS - GetFeature埂材，前者通過extent獲取內(nèi)容塑顺，后者通過filter獲取汤求。
• 拉框俏险，利用Draw組件繪制Box實現(xiàn)

WFS實現(xiàn)

• 引入組件

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';

• 實現(xiàn)方法

  /**主要參數(shù)設置**/
  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實現(xiàn)

• 引入組件

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

• 實現(xiàn)方法

//創(chuàng)建屬性過濾器 可以過濾字段 添加%%可以模糊查詢
var fieldFilter = equalToFilter('字段名', '字段值')；
//創(chuàng)建空間過濾器 可以查詢特定區(qū)域下的數(shù)據(jù) 即拉框查詢
 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:必須為創(chuàng)建工作區(qū)時的命名空間URI
• featurePrefix: 命名空間即工作區(qū)的名稱
• featureTypes: 查詢圖層名稱
• intersects中的參數(shù)geometryName不能任意填寫扬绪，而是必須填寫WFS相關(guān)數(shù)據(jù)源中空間屬性字段名稱竖独，即數(shù)據(jù)源geometry類型對應的字段

封裝SpaceQuery.js

import {
    intersects
} from 'ol/format/filter';
import { WFS, GeoJSON } from 'ol/format';
import axios from 'axios'
export default {
    typeName: 'cite:point',//工作區(qū):圖層名
    srsname: 'EPSG:4326',//坐標系
    featureNS: 'http://www.opengeospatial.net/cite',//命名空間URI
    featurePrefix: 'cite',//工作區(qū)
    featureTypes: 'point',//圖層名
    geometryName: 'the_geom',
    queryByDraw(fea) {
        /**主要參數(shù)設置**/
        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) {
        //創(chuàng)建空間過濾器 可以查詢特定區(qū)域下的數(shù)據(jù) 即拉框查詢
        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();
          //查詢到的結(jié)果res
          console.log(res);
     });
     //Query.queryByWFSFeature(feature.getGeometry());
 });
Draw.stop();

SpaceQuery.js中queryByDraw和queryByWFSFeature都可以實現(xiàn)拉框查詢，兩種方法都可以用

• 調(diào)用geoserver的wfs接口查詢時挤牛，出現(xiàn)跨域問題莹痢，通過在配置文件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', //設置你調(diào)用的接口域名和端口號 別忘了加http
                changeOrigin: true,
                pathRewrite: {
                    '^/geoserver': '/'
                }
            }
        },
        before: app => { }
    }