首先要阅读wfs文档,跟当初cesium加载wmts一样。
http://support.supermap.com.cn:8090/iserver/services/data-world/wfs100/utf-8
主要包括三个部分
Capability:指该服务具有的能力
查询具有哪些能力、获取feature、操作事务的能力, 中间的get、post代表请求方式
重要的一点是,请求数据返回的格式:标准的WFS支持json,最开始未注意到这点,导致前端加载一直报错
此服务get方式仅支持gml2的格式,因此请求数据之后用gml2 API来加载
FeatureTypeList :代表有哪些图层,支持的操作,增删改查
FeatureType:图层名称
最后一部分:ogc:Filter_Capabilities
即支持数据过滤的类型,其中BBOX方式在ol有也有示例,还包括其他一些方式,后续需要再研究
加载代码:
loadWFS(){
var vectorSource = new VectorSource();
var vector = new VectorLayer({
source: vectorSource,
style: new Style({
stroke: new Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
})
});
let url='api/iserver/services/data-world/wfs100/utf-8?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=World:China_Boundary_nanhai&' +
'outputFormat=application/json&srsname=EPSG:4326'
axios.get(url).then( res => {
var features = new GML2().readFeatures(res.data, {
featureProjection: map.getView().getProjection()
});
console.log(features)
vectorSource.addFeatures(features);
map.getView().fit(vectorSource.getExtent());
})
map.addLayer(vector)
},
加载出来有个问题是坐标系不正确:后续再进行研究吧