diff client/src/store/map.js @ 2482:ae1987c5beb3 critical-bottlenecks

client: display bottleneck status in separate layer
author Markus Kottlaender <markus@intevation.de>
date Fri, 01 Mar 2019 14:55:58 +0100
parents ba15d3534b2b
children 7247eb03e7c0
line wrap: on
line diff
--- 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({