openlayers中更简单的加载wfs服务的方式
在之前我介绍过openlayers中通过wfs服务加载矢量数据的方法,通常我都是按照这种方法来使用《传送门》。
在翻看openlayer官方示例后,发现其实还有其它的方法。这里来介绍下
- 方法
- 常规方法
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);
})
- 更简单的方法
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来加载
- 分片加载
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
- 最前面的通过WFS.writeGetFeature和fetch,请求方法是POST,参数通过XML传递过去
- 后面两种方法请求都是GET,参数在地址上。
- 前两种方法,拉取数据都是全量获取,只会产生一个WFS请求,如果数据量大,加载会稍微慢点;后一种方法,采用了分片加载,分并发多个wfs请求,数据展示会分片展示出来,类似矢量瓦片。