博客

openlayers中更简单的加载wfs服务的方式

在之前我介绍过openlayers中通过wfs服务加载矢量数据的方法，通常我都是按照这种方法来使用

《传送门》

。

在翻看openlayer官方示例后，发现其实还有其它的方法。这里来介绍下

1. 方法

1. 常规方法

import VectorSource from 'ol/source/Vector'
import {GeoJSON, WFS} from 'ol/format.js'

...

const vectorSource = new VectorSource()

const featureRequest = new WFS().writeGetFeature({
  srsName: 'EPSG:3857',
  featureNS: 'http://openstreemap.org',
  featurePrefix: 'osm',
  featureTypes: ['water_areas'],
  outputFormat: 'application/json',
  filter: andFilter(
    likeFilter('name', 'Mississippi*'),
    equalToFilter('waterway', 'riverbank')
  ),
})

fetch('https://ahocevar.com/geoserver/wfs', {
  method: 'POST',
  body: new XMLSerializer().serializeToString(featureRequest),
})
  .then(function (response) {
    return response.json();
  })
  .then(function (json) {
    const features = new GeoJSON().readFeatures(json);
    vectorSource.addFeatures(features);
  })

2. 更简单的方法

import VectorSource from 'ol/source/Vector'
import GeoJSON from 'ol/format/GeoJSON'
import {createXYZ} from 'ol/tilegrid'
import {tile} from 'ol/loadingstrategy'

...

const vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function () {
    return (
      'https://ahocevar.com/geoserver/wfs?service=WFS&' +
      'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
      'outputFormat=application/json&srsname=EPSG:4326'
    )
  }

直接给出url来加载

3. 分片加载

import VectorSource from 'ol/source/Vector'
import GeoJSON from 'ol/format/GeoJSON'
import {createXYZ} from 'ol/tilegrid'
import {tile} from 'ol/loadingstrategy'

...

const vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function (extent) {
    return (
      'https://ahocevar.com/geoserver/wfs?service=WFS&' +
      'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
      'outputFormat=application/json&srsname=EPSG:4326&' +
      'bbox(geom,' +
        extent.join(',') +
        ",'EPSG:4326')"
      )
    },
    strategy: tile(createXYZ({tileSize: 512})),
    )
  }

即可以通过createXYZ生成瓦片区域，然后传到url函数里面，通过bbox参数加到url地址上。

如果要加属性查询条件，可以给url上带上CQL_FILTER参数

const vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function (extent) {
    return (
      'https://ahocevar.com/geoserver/wfs?service=WFS&' +
      'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
      'outputFormat=application/json&srsname=EPSG:4326&' +
      "CQL_FILTER=name like 'Mississippi*' and waterway='riverbank' and" +
      `bbox(geom,${extent.join(',')},'EPSG:4326')`
    )
  },
  strategy: tile(createXYZ({tileSize: 512})),

注意：这时 bbox是放在CQL_FILTER参数里面的。如果bbox作物地址参数和CQL_FILTE一起用，则会返回异常，如：

‘https://ahocevar.com/geoserver/wfs?service=WFS&bbox=112,11,122,44&CQL_FILTER=…’

2. 各方法的区别2

• 最前面的通过WFS.writeGetFeature和fetch，请求方法是POST，参数通过XML传递过去
• 后面两种方法请求都是GET，参数在地址上。
• 前两种方法，拉取数据都是全量获取，只会产生一个WFS请求，如果数据量大，加载会稍微慢点；后一种方法，采用了分片加载，分并发多个wfs请求，数据展示会分片展示出来，类似矢量瓦片。