Mercurial > gemma

changeset 733:e57955c1996f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve code structure * Change loading strategy for waterway axis to bbox mainly for consistency. Its size is small compared to other WFS features, so the speed gain is not big by changing to dynamic loading. * Use getLayerByName() instead of hard references. * Refactor section about loading layers to be shorter and to reference the name of each layer only once.
author Bernhard Reiter <bernhard@intevation.de>
date Mon, 24 Sep 2018 09:23:09 +0200
parents 39b5cf9a6b8f
children 1581ba78a360
files client/src/map/Maplayer.vue client/src/map/store.js
diffstat 2 files changed, 66 insertions(+), 75 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/map/Maplayer.vue	Sun Sep 23 19:51:02 2018 +0200
+++ b/client/src/map/Maplayer.vue	Mon Sep 24 09:23:09 2018 +0200
@@ -194,8 +194,11 @@
       })
     });
 
+    // TODO make display of layers more dynamic, e.g. from a list
+
+    // loading the full WFS layer, by not setting the loader function
+    // and without bboxStrategy
     var featureRequest2 = new WFS().writeGetFeature({
-      // srsName: "urn:ogc:def:crs:EPSG::4326",
       srsName: "EPSG:3857",
       featureNS: "gemma",
       featurePrefix: "gemma",
@@ -203,6 +206,8 @@
       outputFormat: "application/json"
     });
 
+    // NOTE: loading the full fairway_dimensions makes sure
+    //       that all are available for the intersection with the profile
     HTTP.post(
       "/internal/wfs",
       new XMLSerializer().serializeToString(featureRequest2),
@@ -214,88 +219,72 @@
       }
     ).then(response => {
       var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
-      var vectorSrc = this.layers[2].data.getSource();
+      var vectorSrc = this.getLayerByName(
+        "Fairway Dimensions"
+      ).data.getSource();
       vectorSrc.addFeatures(features);
       // would scale to the extend of all resulting features
       // this.openLayersMap.getView().fit(vectorSrc.getExtent());
     });
 
-    // FIXME hardwired for now
-    var featureRequestOptions3 = {
-      featurePrefix: "ws-wamos",
-      featureTypes: ["ienc_wtware"],
-      geometryName: "geom"
-    };
+    // load following layers with bboxStrategy (using our request builder)
+    var layer = null;
 
-    this.layers[3].data
-      .getSource()
-      .setLoader(
-        this.buildVectorLoader(
-          featureRequestOptions3,
-          "/external/d4d",
-          this.layers[3].data.getSource()
-        )
-      );
+    layer = this.getLayerByName("Waterway Area");
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featurePrefix: "ws-wamos",
+          featureTypes: ["ienc_wtware"],
+          geometryName: "geom"
+        },
+        "/external/d4d",
+        layer.data.getSource()
+      )
+    );
 
-    // FIXME hardwired for now
-    var featureRequest4 = new WFS().writeGetFeature({
-      featurePrefix: "ws-wamos",
-      featureTypes: ["ienc_wtwaxs"],
-      outputFormat: "application/json"
-    });
+    layer = this.getLayerByName("Waterway Axis");
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featurePrefix: "ws-wamos",
+          featureTypes: ["ienc_wtwaxs"],
+          geometryName: "geom"
+        },
+        "/external/d4d",
+        layer.data.getSource()
+      )
+    );
 
-    HTTP.post(
-      "/external/d4d",
-      new XMLSerializer().serializeToString(featureRequest4),
-      {
-        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[4].data.getSource();
-      vectorSrc.addFeatures(features);
-    });
-
-    // FIXME this is hardwired for now to try for an external point layer
-    var featureRequestOptions5 = {
-      featurePrefix: "ws-wamos",
-      featureTypes: ["ienc_dismar"],
-      geometryName: "geom" //,
-      /* restrict loading approximately to extend of danube in Austria */
-      // filter: bboxFilter("geom", [13.3, 48.0, 17.1, 48.6], "EPSG:4326")
-    };
+    layer = this.getLayerByName("Distance marks");
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featurePrefix: "ws-wamos",
+          featureTypes: ["ienc_dismar"],
+          geometryName: "geom" //,
+          /* restrict loading approximately to extend of danube in Austria */
+          // filter: bboxFilter("geom", [13.3, 48.0, 17.1, 48.6], "EPSG:4326")
+        },
+        "/external/d4d",
+        layer.data.getSource()
+      )
+    );
+    layer.data.setVisible(layer.isVisible);
 
-    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 = {
-      featureNS: "gemma",
-      featurePrefix: "gemma",
-      featureTypes: ["distance_marks_geoserver"],
-      geometryName: "geom"
-    };
-
-    this.layers[6].data
-      .getSource()
-      .setLoader(
-        this.buildVectorLoader(
-          featureRequestOptions6,
-          "/internal/wfs",
-          this.layers[6].data.getSource()
-        )
-      );
+    layer = this.getLayerByName("Distance marks, Axis");
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featureNS: "gemma",
+          featurePrefix: "gemma",
+          featureTypes: ["distance_marks_geoserver"],
+          geometryName: "geom"
+        },
+        "/internal/wfs",
+        layer.data.getSource()
+      )
+    );
   }
 };
 </script>
--- a/client/src/map/store.js	Sun Sep 23 19:51:02 2018 +0200
+++ b/client/src/map/store.js	Mon Sep 24 09:23:09 2018 +0200
@@ -75,7 +75,9 @@
       {
         name: "Waterway Axis",
         data: new VectorLayer({
-          source: new VectorSource(),
+          source: new VectorSource({
+            strategy: bboxStrategy
+          }),
           style: new Style({
             stroke: new Stroke({
               color: "rgba(0, 0, 255, .5)",