Leaflet implements the WFS service published by loading hypergraph

Leaflet implements the WFS service published by loading hypergraph

1. Basic ideas

1. By GetCapabilitiesobtaining the capability document, read the feature type list (that is, the layer list);
2. By GetFeaturegetting all the features in the service, the request address needs to contain the layer list string of the first step;
3. Since the data format returned by the SuperMap WFS service is GML2, it cannot be used directly. It is necessary to convert the Features into OpenLayers Features with the help of OpenLayers, then convert the Features into GeoJSON objects, and then use Leaflet to add the GeoJSON data to the map.

2. Integration steps

1. Add OpenLayersdependencies;

   npm install ol --save
   

2. Import openlayers related modules

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

   

3. Get Capability Documentation

    /**
      * 获取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. query service

   /**
      * 获取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. integrated

   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. Hidden problems

1. If the amount of WFS service data is too large, the query time will be too long (this problem cannot be avoided, WFS itself is used as a data service, and the map display function must be queried first);
2. Coordinate system issues may be involved (can only be determined after testing);
3. Layer problem, WFS service contains multiple layers, currently it is querying all layers of the entire WFS service;