# HG changeset patch
# User Bernhard Reiter <bernhard@intevation.de>
# Date 1537479622 -7200
# Node ID 8149772c62d6a6af4fe9d0b27b667c7cf4b7f177
# Parent  8c3c43595d3970c56a07ab2bf5d671689dcabde8
client: add bbox loading strategy to riverkilometre

  * Change Maplayer.vue to offer a buildVectorLoader which can
    be used to implement a loading strategy that will only load
    the extents that are currently viewed.
  * Change the Distance Marks, Axis layer to use this new way of loading.

diff -r 8c3c43595d39 -r 8149772c62d6 client/src/map/Maplayer.vue
--- a/client/src/map/Maplayer.vue	Thu Sep 20 21:50:18 2018 +0200
+++ b/client/src/map/Maplayer.vue	Thu Sep 20 23:40:22 2018 +0200
@@ -73,6 +73,45 @@
       const interaction = this.createInteraction(this.drawMode);
       this.interaction = interaction;
       this.openLayersMap.addInteraction(interaction);
+    },
+    buildVectorLoader(featureRequestOptions, endpoint, vectorSource) {
+      // build a function to be used for VectorSource.setLoader()
+      // make use of WFS().writeGetFeature to build the request
+      // and use our HTTP library to actually do it
+      // NOTE: a) the projection has to be fixed in the featureRequestOptions
+      //  just like geometryName has to be given, because we want to
+      //  load depending on the bbox
+      //  b) the VectorSource has to have option strategy: bbox for this
+      featureRequestOptions["outputFormat"] = "application/json";
+      var loader = function(extent) {
+        //var loader = function(extent, resolution, projection) {
+        //var proj = projection.getCode();
+        featureRequestOptions["bbox"] = extent;
+        var featureRequest = new WFS().writeGetFeature(featureRequestOptions);
+        // DEBUG console.log(featureRequest);
+        HTTP.post(
+          endpoint,
+          new XMLSerializer().serializeToString(featureRequest),
+          {
+            headers: {
+              "X-Gemma-Auth": localStorage.getItem("token"),
+              "Content-type": "text/xml; charset=UTF-8"
+            }
+          }
+        )
+          .then(response => {
+            var features = new GeoJSON().readFeatures(
+              JSON.stringify(response.data)
+            );
+            vectorSource.addFeatures(features);
+            console.log("loaded", features.length, "features");
+            // DEBUG console.log("loaded ", features, "for", vectorSource);
+            // eslint-disable-next-line
+        }).catch(error => {
+            vectorSource.removeLoadedExtent(extent);
+          });
+      };
+      return loader;
     }
   },
   watch: {
@@ -201,29 +240,23 @@
     });
 
     // FIXME this is hardwired for now
-    var featureRequest6 = new WFS().writeGetFeature({
+    var featureRequestOptions6 = {
       srsName: "EPSG:3857",
       featureNS: "gemma",
       featurePrefix: "gemma",
       featureTypes: ["distance_marks_geoserver"],
-      outputFormat: "application/json"
-    });
+      geometryName: "geom"
+    };
 
-    HTTP.post(
-      "/internal/wfs",
-      new XMLSerializer().serializeToString(featureRequest6),
-      {
-        headers: {
-          "X-Gemma-Auth": localStorage.getItem("token"),
-          "Content-type": "text/xml; charset=UTF-8"
-        }
-      }
-    ).then(response => {
-      var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
-      var vectorSrc = this.layers[6].data.getSource();
-      vectorSrc.addFeatures(features);
-      console.log("loaded ", features, "for", vectorSrc);
-    });
+    this.layers[6].data
+      .getSource()
+      .setLoader(
+        this.buildVectorLoader(
+          featureRequestOptions6,
+          "/internal/wfs",
+          this.layers[6].data.getSource()
+        )
+      );
   }
 };
 </script>
diff -r 8c3c43595d39 -r 8149772c62d6 client/src/map/store.js
--- a/client/src/map/store.js	Thu Sep 20 21:50:18 2018 +0200
+++ b/client/src/map/store.js	Thu Sep 20 23:40:22 2018 +0200
@@ -5,6 +5,7 @@
 import OSM from "ol/source/OSM";
 import { Stroke, Style, Fill, Text, Circle as CircleStyle } from "ol/style.js";
 import VectorSource from "ol/source/Vector.js";
+import { bbox as bboxStrategy } from "ol/loadingstrategy";
 
 const MapStore = {
   namespaced: true,
@@ -93,7 +94,9 @@
       {
         name: "Distance marks, Axis",
         data: new VectorLayer({
-          source: new VectorSource(),
+          source: new VectorSource({
+            strategy: bboxStrategy
+          }),
           style: function(feature, resolution) {
             if (resolution < 10) {
               var s = new Style({