openlayers加载超图发布的wfs服务

最新推荐文章于 2024-08-30 09:17:01 发布

A873054267

最新推荐文章于 2024-08-30 09:17:01 发布

阅读量2.4k

点赞数 1

文章标签： openlayers 超图 WFS

本文链接：https://blog.csdn.net/A873054267/article/details/105973493

版权

首先要阅读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)

},

加载出来有个问题是坐标系不正确：后续再进行研究吧