Leaflet实现加载超图发布的WFS服务

Leaflet实现加载超图发布的WFS服务

1. 基本思路

1. 通过GetCapabilities获取能力文档，读取要素类型列表（就是图层列表）；
2. 通过GetFeature获取服务中的所有要素，请求地址中需要包含第一步的图层列表字符串；
3. 由于超图WFS服务返回的数据格式为GML2，无法直接使用，需要先借助OpenLayers转为OpenLayers的Features，再将Features转为GeoJSON对象，再用Leaflet将GeoJSON数据添加到地图上。

2. 集成步骤

1. 添加OpenLayers依赖;

   npm install ol --save
   

2. 引入openlayers相关模块

   import GML2 from 'ol/format/GML2'; // 引入OpenLayers
   import GeoJSON from 'ol/format/GeoJSON';
   

   

3. 获取能力文档

    /**
      * 获取WFS服务要素类型列表，用于要素查询时的参数
      * @param {*} serviceUrl WFS服务地址
      */
     static getWFSFeatureTypeList(serviceUrl) {
         
         
       return new Promise((resolve, reject) => {
         
         
         axios.get(serviceUrl + "?service=WFS&request=GetCapabilities").then(function (response) {
         
         
           parseString(response.data, function (err, result) {
         
         
             let featureTypeList = result.WFS_Capabilities.FeatureTypeList[0]['FeatureType'];
             let featureTypeListStr = "";
             for (let i = 0; i < featureTypeList.length; i++) {
         
         
               featureTypeListStr += featureTypeList[i].Name[0];
               if (i != featureTypeList.length -1) {
         
         
                 featureTypeListStr += ",";
               }
             }
             resolve(featureTypeListStr);
             // console.log(featureTypeListStr);
           });
         }).catch(error => {
         
         
           console.error(error);
         })
       })
     }
   

4. 查询服务

   /**
      * 获取WFS服务中的要素
      * @param {*} serviceUrl WFS服务地址
      * @param {String} featureTypeListStr 要素类型列表
      */
     static getWFSFeature(serviceUrl, featureTypeListStr) {
         
         
       return new Promise((resolve, reject) => {
         
         
         // 通过查询获取服务中的要素
         axios.get(serviceUrl + "?SERVICE=WFS&REQUEST=GetFeature&TYPENAME=" + featureTypeListStr).then(function (response) {
         
         
           // console.log(response);
           let gml2Reader = new GML2();
           let features = gml2Reader.readFeatures(response.data); // 将GML2格式数据转为OpenLayers要素
           let geoJSONReader = new GeoJSON();
           let geoJson = geoJSONReader.writeFeaturesObject(features); // 转为 GeoJSON 对象
           // console.log(geoJson);
           L.geoJSON(geoJson).addTo(map); // 添加到地图
         }).catch(error => {
         
         
           console.error(error);
         })
       })
     }
   

   

5. 集成

   if (nature == "WFS") {
         
         
                   MapUtil.getWFSFeatureTypeList("http://127.0.0.1:8090/iserver/services/data-rizhao_network/wfs100").then(featureType => {
         
         
                     MapUtil.getWFSFeature("http://127.0.0.1:8090/iserver/services/data-rizhao_network/wfs100", featureType);
                   });
                 }
   

3. 问题隐患

1. 如果WFS服务数据量过大，会造成查询时间过长（该问题无法避免，WFS本身是作为数据服务使用，要实现地图展示功能必须要先查询）；
2. 可能涉及到坐标系问题（需要测试后才能确定）；
3. 图层问题，WFS服务中包含多个图层，目前是对整个WFS服务的所有图层查询；