changeset 2506:89c439721db2 critical-bottlenecks

client: new symbold for critical bottlenecks, normal bottlenecks are not marked anymore
author Markus Kottlaender <markus@intevation.de>
date Tue, 05 Mar 2019 08:41:02 +0100
parents 51dbcbf11c5f
children ac0e2cf199e7
files client/src/components/Maplayer.vue client/src/components/layers/LegendElement.vue client/src/store/map.js
diffstat 3 files changed, 26 insertions(+), 19 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Maplayer.vue	Mon Mar 04 16:28:49 2019 +0100
+++ b/client/src/components/Maplayer.vue	Tue Mar 05 08:41:02 2019 +0100
@@ -414,12 +414,7 @@
                 color: btlnFillC
               })
             });
-            layer.data.setStyle(function(feature, resolution) {
-              if (resolution <= 50) {
-                return newStyle;
-              }
-              return null;
-            });
+            layer.data.setStyle(newStyle);
           })
           .catch(error => {
             console.log(error);
--- a/client/src/components/layers/LegendElement.vue	Mon Mar 04 16:28:49 2019 +0100
+++ b/client/src/components/layers/LegendElement.vue	Tue Mar 05 08:41:02 2019 +0100
@@ -95,7 +95,8 @@
         }
         mapStyle = this.mapLayer.data.getStyleFunction()(
           feature,
-          this.mapLayer.forLegendStyle.resolution
+          this.mapLayer.forLegendStyle.resolution,
+          true
         );
       }
 
--- a/client/src/store/map.js	Mon Mar 04 16:28:49 2019 +0100
+++ b/client/src/store/map.js	Tue Mar 05 08:41:02 2019 +0100
@@ -52,7 +52,7 @@
   WATERWAYAXIS: "Waterway Axis",
   WATERWAYPROFILES: "Waterway Profiles",
   BOTTLENECKS: "Bottlenecks",
-  BOTTLENECKSTATUS: "Bottleneck Status",
+  BOTTLENECKSTATUS: "Critical Bottlenecks",
   BOTTLENECKISOLINE: "Bottleneck isolines",
   DISTANCEMARKS: "Distance marks",
   DISTANCEMARKSAXIS: "Distance marks, Axis",
@@ -334,24 +334,35 @@
       },
       {
         name: LAYERS.BOTTLENECKSTATUS,
-        forLegendStyle: { point: true, resolution: 51 },
+        forLegendStyle: { point: true, resolution: 16 },
         data: new VectorLayer({
           source: new VectorSource({
             strategy: bboxStrategy
           }),
-          style: function(feature, resolution) {
-            if (resolution > 50) {
+          style: function(feature, resolution, isLegend) {
+            if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
               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 })
+                image: new RegularShape({
+                  points: 3,
+                  radius: isLegend ? 9 : 13,
+                  fill: new Fill({ color: "white" }),
+                  stroke: new Stroke({
+                    color: "rgba(255, 0, 0, 0.8)",
+                    width: isLegend ? 2 : 3
+                  })
+                }),
+                text: new Text({
+                  font:
+                    "bold " +
+                    (isLegend ? 8 : 12) +
+                    'px "Open Sans", "sans-serif"',
+                  placement: "point",
+                  fill: new Fill({ color: "black" }),
+                  text: "!",
+                  offsetY: isLegend ? 0 : 1,
+                  offsetX: isLegend ? 1 : 0
                 })
               });
             }