Mercurial > gemma

changeset 2482:ae1987c5beb3 critical-bottlenecks

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: display bottleneck status in separate layer
author Markus Kottlaender <markus@intevation.de>
date Fri, 01 Mar 2019 14:55:58 +0100
parents 0c9121abf120
children 7247eb03e7c0
files client/src/components/Maplayer.vue client/src/store/map.js
diffstat 2 files changed, 66 insertions(+), 15 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Maplayer.vue	Fri Mar 01 13:51:09 2019 +0100
+++ b/client/src/components/Maplayer.vue	Fri Mar 01 14:55:58 2019 +0100
@@ -352,6 +352,20 @@
     );
     layer.data.setVisible(layer.isVisible);
 
+    layer = this.getLayerByName(LAYERS.BOTTLENECKSTATUS);
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featureNS: "gemma",
+          featurePrefix: "gemma",
+          featureTypes: ["bottlenecks_geoserver"],
+          geometryName: "area"
+        },
+        "/internal/wfs",
+        layer.data.getSource()
+      )
+    );
+
     layer = this.getLayerByName(LAYERS.BOTTLENECKS);
     layer.data.getSource().setLoader(
       this.buildVectorLoader(
@@ -370,22 +384,27 @@
       headers: { "X-Gemma-Auth": localStorage.getItem("token") }
     })
       .then(response => {
-        this.btlnStrokeC = response.data.code;
+        let btlnStrokeC = response.data.code;
         HTTP.get("/system/style/Bottlenecks/fill", {
           headers: { "X-Gemma-Auth": localStorage.getItem("token") }
         })
           .then(response => {
-            this.btlnFillC = response.data.code;
-            var newstyle = new Style({
+            let btlnFillC = response.data.code;
+            var newStyle = new Style({
               stroke: new Stroke({
-                color: this.btlnStrokeC,
+                color: btlnStrokeC,
                 width: 4
               }),
               fill: new Fill({
-                color: this.btlnFillC
+                color: btlnFillC
               })
             });
-            layer.data.setStyle(newstyle);
+            layer.data.setStyle(function(feature, resolution) {
+              if (resolution <= 50) {
+                return newStyle;
+              }
+              return null;
+            });
           })
           .catch(error => {
             console.log(error);
--- a/client/src/store/map.js	Fri Mar 01 13:51:09 2019 +0100
+++ b/client/src/store/map.js	Fri Mar 01 14:55:58 2019 +0100
@@ -44,6 +44,7 @@
   WATERWAYAXIS: "Waterway Axis",
   WATERWAYPROFILES: "Waterway Profiles",
   BOTTLENECKS: "Bottlenecks",
+  BOTTLENECKSTATUS: "Bottleneck Status",
   BOTTLENECKISOLINE: "Bottleneck isolines",
   DISTANCEMARKS: "Distance marks",
   DISTANCEMARKSAXIS: "Distance marks, Axis",
@@ -279,15 +280,17 @@
           source: new VectorSource({
             strategy: bboxStrategy
           }),
-          style: new Style({
-            stroke: new Stroke({
-              color: "rgba(230, 230, 10, .8)",
-              width: 4
-            }),
-            fill: new Fill({
-              color: "rgba(230, 230, 10, .3)"
-            })
-          })
+          style: function() {
+            return new Style({
+              stroke: new Stroke({
+                color: "rgba(230, 230, 10, .8)",
+                width: 4
+              }),
+              fill: new Fill({
+                color: "rgba(230, 230, 10, .3)"
+              })
+            });
+          }
         }),
         isVisible: true,
         showInLegend: true
@@ -321,6 +324,35 @@
         showInLegend: true
       },
       {
+        name: LAYERS.BOTTLENECKSTATUS,
+        forLegendStyle: { point: true, resolution: 51 },
+        data: new VectorLayer({
+          source: new VectorSource({
+            strategy: bboxStrategy
+          }),
+          style: function(feature, resolution) {
+            if (resolution > 50) {
+              let bnCenter = getCenter(feature.getGeometry().getExtent());
+              let fillColor = feature.get("fa_critical")
+                ? "rgba(255, 0, 0, 0.5)"
+                : "rgba(0, 255, 0, 0.5)";
+              let strokeColor = feature.get("fa_critical") ? "red" : "green";
+              return new Style({
+                geometry: new Point(bnCenter),
+                image: new Circle({
+                  radius: 10,
+                  fill: new Fill({ color: fillColor }),
+                  stroke: new Stroke({ color: strokeColor, width: 2 })
+                })
+              });
+            }
+            return [];
+          }
+        }),
+        isVisible: true,
+        showInLegend: true
+      },
+      {
         name: LAYERS.DISTANCEMARKS,
         forLegendStyle: { point: true, resolution: 8 },
         data: new VectorLayer({