Merge pull request #427 from sronveaux/wfs-featuresloadend-featuresloaderror-events

Fix featuresloadend and featuresloaderror events not fired properly by WFS layers

Author: sronveaux

app-starter/static/app-conf-projected.json

@@ -78,7 +78,7 @@
     {
       "type": "WFS",
       "lid": "dutch-nat-parks",
-      "url": "https://service.pdok.nl/rvo/nationaleparken/wfs/v2_0?",
+      "url": "https://service.pdok.nl/rvo/nationaleparken/wfs/v2_0",
       "typeName": "nationaleparken:nationaleparken",
       "version": "2.0.0",
       "maxFeatures": 10,

src/factory/Layer.js

@@ -225,42 +225,48 @@ export const LayerFactory = {
 
     const vectorSource = new VectorSource({
       format: new this.formatMapping[lConf.format](lConf.formatConfig),
-      loader: (extent) => {
+      loader: (extent, resolution, projection, success, failure) => {
         // assemble WFS GetFeature request
-        const pre = lConf.url.includes('?') ? '&' : '?';
-        let wfsRequest = lConf.url + pre + 'service=WFS&' +
-          'version=' + lConf.version + '&request=GetFeature&' +
-          'typename=' + lConf.typeName + '&' +
-          'outputFormat=' + outputFormat + '&srsname=' + lConf.projection;
+        const params = {
+          service: 'WFS',
+          version: lConf.version,
+          request: 'GetFeature',
+          typename: lConf.typeName,
+          outputFormat,
+          srsname: lConf.projection
+        };
 
         // add WFS version dependent feature limitation
         if (Number.isInteger(parseInt(lConf.maxFeatures))) {
           if (lConf.version.startsWith('1.')) {
-            wfsRequest += '&maxFeatures=' + lConf.maxFeatures;
+            params.maxFeatures = lConf.maxFeatures;
           } else {
-            wfsRequest += '&count=' + lConf.maxFeatures;
+            params.count = lConf.maxFeatures;
           }
         }
         // add bbox filter
         if (lConf.loadOnlyVisible !== false) {
           if (mapSrs !== lConf.projection) {
             extent = applyTransform(extent, getTransform(mapSrs, lConf.projection));
           }
-          wfsRequest += '&bbox=' + extent.join(',') + ',' + lConf.projection + '';
+          params.bbox = extent.join(',') + ',' + lConf.projection;
         }
 
         // load data from WFS, parse and add to vector source
         const request = {
           method: 'GET',
-          url: wfsRequest
+          url: lConf.url,
+          params
         };
         axios(request)
           .then(response => {
             const feats = vectorSource.getFormat().readFeatures(response.data);
             vectorSource.addFeatures(feats);
+            success(feats);
           })
           .catch(() => {
             vectorSource.removeLoadedExtent(extent);
+            failure();
           });
       },
       strategy: lConf.loadOnlyVisible !== false ? bboxStrategy : undefined

tests/unit/specs/factory/Layer.spec.js

@@ -15,6 +15,9 @@ import KmlFormat from 'ol/format/KML';
 import Map from 'ol/Map';
 import View from 'ol/View';
 
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+
 describe('LayerFactory', () => {
   it('is defined', () => {
     expect(LayerFactory).to.not.be.an('undefined');
@@ -193,4 +196,109 @@ describe('LayerFactory', () => {
       expect(layer.getSource() instanceof VectorTileSource);
     });
   });
+
+  describe('WFS layer', () => {
+    describe('Events', () => {
+      let divElement;
+      let wfsLayer;
+      let axiosMock;
+      const layerURL = 'https://a-wfs-url.de';
+      const fetchResults = JSON.stringify({
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            id: '1',
+            geometry: {
+              type: 'Polygon',
+              coordinates: [[4.0, 51.0], [4.5, 50.5], [5.0, 51.0], [4.0, 51.0]]
+            }
+          }
+        ]
+      });
+
+      function createMapTargetElement () {
+        const targetElement = document.createElement('div');
+        targetElement.style.cssText = 'width:640px; height:480px';
+        return targetElement;
+      };
+
+      function applyAxiosMock (error = false) {
+        axiosMock = new MockAdapter(axios);
+        if (!error) {
+          axiosMock.onGet(layerURL).reply(200, fetchResults);
+        } else {
+          axiosMock.onGet(layerURL).networkError();
+        }
+      };
+
+      beforeEach(() => {
+        const layerConf = {
+          type: 'WFS',
+          lid: 'a-wfs',
+          url: layerURL,
+          typeName: 'foo:tn',
+          version: '2.0.0',
+          format: 'GeoJSON',
+          projection: 'EPSG:3857',
+          visible: false
+        };
+
+        divElement = createMapTargetElement();
+        document.body.append(divElement);
+
+        const olMap = new Map({
+          view: new View({
+            center: [0, 0],
+            zoom: 1
+          }),
+          layers: [],
+          target: divElement
+        });
+        wfsLayer = LayerFactory.createWfsLayer(layerConf, olMap);
+        olMap.addLayer(wfsLayer);
+      });
+
+      it('fires the featuresloadstart event when displayed', done => {
+        applyAxiosMock();
+
+        wfsLayer.getSource().on('featuresloadstart', () => {
+          done();
+        })
+
+        wfsLayer.setVisible(true);
+      });
+
+      it('fires the featuresloadend event when features retrieved', done => {
+        applyAxiosMock();
+
+        wfsLayer.getSource().on('featuresloadend', () => {
+          done();
+        })
+
+        wfsLayer.setVisible(true);
+      });
+
+      it('fires the featuresloaderror event when error during features retrieval', done => {
+        applyAxiosMock(true);
+
+        wfsLayer.getSource().on('featuresloaderror', () => {
+          done();
+        })
+
+        wfsLayer.setVisible(true);
+      });
+
+      afterEach(() => {
+        if (axiosMock) {
+          axiosMock.restore();
+        }
+
+        if (divElement) {
+          divElement.remove();
+          divElement = undefined;
+        }
+      });
+    });
+  });
 });