Mercurial > gemma

changeset 702:aaf5dbfb9512

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve loading of WFS features * Change Waterway Area and Distance Marks (on the river banks) to use the bbox loader. Which also causes them only to be loaded when they are visible. * Improve buildVectorLoader() to make use of the projection now.
author Bernhard Reiter <bernhard@intevation.de>
date Fri, 21 Sep 2018 00:20:57 +0200
parents 8149772c62d6
children e9c28c42c927
files client/src/map/Maplayer.vue client/src/map/store.js
diffstat 2 files changed, 39 insertions(+), 42 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/map/Maplayer.vue	Thu Sep 20 23:40:22 2018 +0200
+++ b/client/src/map/Maplayer.vue	Fri Sep 21 00:20:57 2018 +0200
@@ -83,10 +83,9 @@
       //  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();
+      var loader = function(extent, resolution, projection) {
         featureRequestOptions["bbox"] = extent;
+        featureRequestOptions["srsName"] = projection.getCode();
         var featureRequest = new WFS().writeGetFeature(featureRequestOptions);
         // DEBUG console.log(featureRequest);
         HTTP.post(
@@ -104,7 +103,12 @@
               JSON.stringify(response.data)
             );
             vectorSource.addFeatures(features);
-            console.log("loaded", features.length, "features");
+            console.log(
+              "loaded",
+              features.length,
+              featureRequestOptions.featureTypes,
+              "features"
+            );
             // DEBUG console.log("loaded ", features, "for", vectorSource);
             // eslint-disable-next-line
         }).catch(error => {
@@ -170,26 +174,21 @@
     });
 
     // FIXME hardwired for now
-    var featureRequest3 = new WFS().writeGetFeature({
+    var featureRequestOptions3 = {
       featurePrefix: "ws-wamos",
       featureTypes: ["ienc_wtware"],
-      outputFormat: "application/json"
-    });
+      geometryName: "geom"
+    };
 
-    HTTP.post(
-      "/external/d4d",
-      new XMLSerializer().serializeToString(featureRequest3),
-      {
-        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[3].data.getSource();
-      vectorSrc.addFeatures(features);
-    });
+    this.layers[3].data
+      .getSource()
+      .setLoader(
+        this.buildVectorLoader(
+          featureRequestOptions3,
+          "/external/d4d",
+          this.layers[3].data.getSource()
+        )
+      );
 
     // FIXME hardwired for now
     var featureRequest4 = new WFS().writeGetFeature({
@@ -214,30 +213,24 @@
     });
 
     // FIXME this is hardwired for now to try for an external point layer
-    var featureRequest5 = new WFS().writeGetFeature({
+    var featureRequestOptions5 = {
       featurePrefix: "ws-wamos",
       featureTypes: ["ienc_dismar"],
-      outputFormat: "application/json",
+      geometryName: "geom",
       /* restrict loading approximately to extend of danube in Austria */
       filter: bboxFilter("geom", [13.3, 48.0, 17.1, 48.6], "EPSG:4326")
-    });
+    };
 
-    HTTP.post(
-      "/external/d4d",
-      new XMLSerializer().serializeToString(featureRequest5),
-      {
-        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[5].data.getSource();
-      this.layers[5].data.setVisible(this.layers[5].isVisible);
-      vectorSrc.addFeatures(features);
-      console.log("loaded ", features, "for", vectorSrc);
-    });
+    this.layers[5].data
+      .getSource()
+      .setLoader(
+        this.buildVectorLoader(
+          featureRequestOptions5,
+          "/external/d4d",
+          this.layers[5].data.getSource()
+        )
+      );
+    this.layers[5].data.setVisible(this.layers[5].isVisible);
 
     // FIXME this is hardwired for now
     var featureRequestOptions6 = {
--- a/client/src/map/store.js	Thu Sep 20 23:40:22 2018 +0200
+++ b/client/src/map/store.js	Fri Sep 21 00:20:57 2018 +0200
@@ -60,7 +60,9 @@
       {
         name: "Waterway Area",
         data: new VectorLayer({
-          source: new VectorSource(),
+          source: new VectorSource({
+            strategy: bboxStrategy
+          }),
           style: new Style({
             stroke: new Stroke({
               color: "rgba(0, 102, 0, 1)",
@@ -87,7 +89,9 @@
       {
         name: "Distance marks",
         data: new VectorLayer({
-          source: new VectorSource()
+          source: new VectorSource({
+            strategy: bboxStrategy
+          })
         }),
         isVisible: false
       },