Mercurial > gemma

changeset 3548:f3102fa16a69

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps This layer displays features based on which other layers are visible. To detect those other layers visibility realiably, the layer needs to be aware about the map it belongs to.
author Markus Kottlaender <markus@intevation.de>
date Fri, 31 May 2019 12:45:30 +0200
parents 47c61ea894b1
children 30f6647b8856
files client/src/components/map/Map.vue client/src/components/map/layers.js client/src/components/map/styles.js
diffstat 3 files changed, 175 insertions(+), 174 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/map/Map.vue	Fri May 31 12:20:08 2019 +0200
+++ b/client/src/components/map/Map.vue	Fri May 31 12:45:30 2019 +0200
@@ -63,7 +63,7 @@
     ...mapState("application", ["paneSetup", "paneRotate"]),
     ...mapState("imports", ["selectedStretchId", "selectedSectionId"]),
     layers() {
-      return layers();
+      return layers(this.paneId);
     },
     hasActiveInteractions() {
       return (
--- a/client/src/components/map/layers.js	Fri May 31 12:20:08 2019 +0200
+++ b/client/src/components/map/layers.js	Fri May 31 12:45:30 2019 +0200
@@ -13,7 +13,7 @@
 import OSM from "ol/source/OSM";
 import { equalTo } from "ol/format/filter";
 import { HTTP } from "@/lib/http";
-import styles from "./styles";
+import styleFactory from "./styles";
 import store from "@/store/index";
 
 const buildVectorLoader = (
@@ -162,7 +162,8 @@
   }
 });
 
-export default function() {
+export default function(mapId) {
+  const styles = styleFactory(mapId);
   // Shared feature source for layers:
   // BOTTLENECKS, BOTTLENECKSTATUS and BOTTLENECKFAIRWAYAVAILABILITY
   // Reduces bottlenecks_geoserver requests and number of stored feature objects.
--- a/client/src/components/map/styles.js	Fri May 31 12:20:08 2019 +0200
+++ b/client/src/components/map/styles.js	Fri May 31 12:45:30 2019 +0200
@@ -129,132 +129,132 @@
   })
 };
 
-export default {
-  stretches(feature) {
-    let style = styles.yellow2;
-    if (feature.get("highlighted")) {
-      style = styles.yellow3;
-    }
-    return style;
-  },
-  sections(feature) {
-    let style = styles.orange1;
-    if (feature.get("highlighted")) {
-      style = styles.orange2;
-    }
-    return style;
-  },
-  fwd1() {
-    return [styles.blue1, styles.textFW1];
-  },
-  fwd2() {
-    return [styles.blue2, styles.textFW2];
-  },
-  fwd3() {
-    return [styles.blue3, styles.textFW3];
-  },
-  bottleneck() {
-    return styles.yellow1;
-  },
-  bottleneckStatus(feature, resolution, isLegend) {
-    let s = [];
-    if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
-      let bnCenter = getCenter(feature.getGeometry().getExtent());
-      s.push(
-        new Style({
-          geometry: new Point(bnCenter),
-          image: new Icon({
-            src: require("@/assets/marker-bottleneck-critical.png"),
-            anchor: [0.5, 0.5],
-            scale: isLegend ? 0.5 : 1
+export default function(mapId) {
+  return {
+    stretches(feature) {
+      let style = styles.yellow2;
+      if (feature.get("highlighted")) {
+        style = styles.yellow3;
+      }
+      return style;
+    },
+    sections(feature) {
+      let style = styles.orange1;
+      if (feature.get("highlighted")) {
+        style = styles.orange2;
+      }
+      return style;
+    },
+    fwd1() {
+      return [styles.blue1, styles.textFW1];
+    },
+    fwd2() {
+      return [styles.blue2, styles.textFW2];
+    },
+    fwd3() {
+      return [styles.blue3, styles.textFW3];
+    },
+    bottleneck() {
+      return styles.yellow1;
+    },
+    bottleneckStatus(feature, resolution, isLegend) {
+      let s = [];
+      if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
+        let bnCenter = getCenter(feature.getGeometry().getExtent());
+        s.push(
+          new Style({
+            geometry: new Point(bnCenter),
+            image: new Icon({
+              src: require("@/assets/marker-bottleneck-critical.png"),
+              anchor: [0.5, 0.5],
+              scale: isLegend ? 0.5 : 1
+            })
           })
-        })
-      );
-    }
-    if (feature.get("fa_critical") && !isLegend) {
-      s.push(styles.red1);
-    }
-    return s;
-  },
-  bottleneckFairwayAvailability(feature, resolution, isLegend) {
-    let s = [];
-    if (isLegend) {
-      s.push(
-        new Style({
-          image: new Icon({
-            src: require("@/assets/fa-diagram.png"),
-            anchor: [0.5, 0.5],
-            scale: 1
+        );
+      }
+      if (feature.get("fa_critical") && !isLegend) {
+        s.push(styles.red1);
+      }
+      return s;
+    },
+    bottleneckFairwayAvailability(feature, resolution, isLegend) {
+      let s = [];
+      if (isLegend) {
+        s.push(
+          new Style({
+            image: new Icon({
+              src: require("@/assets/fa-diagram.png"),
+              anchor: [0.5, 0.5],
+              scale: 1
+            })
           })
-        })
-      );
-    }
-    if (
-      feature.get("fa_critical") &&
-      feature.get("fa_data") &&
-      resolution > 15
-    ) {
-      let data = feature.get("fa_data");
-      let lnwlHeight = (80 / 100) * data.ldc;
-      let belowThresholdHeight = (80 / 100) * data.below;
-      let betweenThresholdHeight = (80 / 100) * data.between;
-      let aboveThresholdHeight = (80 / 100) * data.above;
+        );
+      }
+      if (
+        feature.get("fa_critical") &&
+        feature.get("fa_data") &&
+        resolution > 15
+      ) {
+        let data = feature.get("fa_data");
+        let lnwlHeight = (80 / 100) * data.ldc;
+        let belowThresholdHeight = (80 / 100) * data.below;
+        let betweenThresholdHeight = (80 / 100) * data.between;
+        let aboveThresholdHeight = (80 / 100) * data.above;
 
-      let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`;
-      let lnwl = `<rect x='2' y='${80 -
-        lnwlHeight +
-        2}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`;
-      let range1 = `<rect x='12' y='2' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`;
-      let range2 = `<rect x='12' y='${belowThresholdHeight +
-        2}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`;
-      let range3 = `<rect x='12' y='${80 -
-        aboveThresholdHeight +
-        2}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`;
-      let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`;
-      let bnCenter = getCenter(feature.getGeometry().getExtent());
-      s.push(
-        new Style({
-          geometry: new Point(bnCenter),
-          image: new Icon({
-            src: svg,
-            anchor: [1.2, 1.2]
+        let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`;
+        let lnwl = `<rect x='2' y='${80 -
+          lnwlHeight +
+          2}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`;
+        let range1 = `<rect x='12' y='2' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`;
+        let range2 = `<rect x='12' y='${belowThresholdHeight +
+          2}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`;
+        let range3 = `<rect x='12' y='${80 -
+          aboveThresholdHeight +
+          2}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`;
+        let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`;
+        let bnCenter = getCenter(feature.getGeometry().getExtent());
+        s.push(
+          new Style({
+            geometry: new Point(bnCenter),
+            image: new Icon({
+              src: svg,
+              anchor: [1.2, 1.2]
+            })
           })
-        })
-      );
-    }
-    return s;
-  },
-  dataAvailability(feature, resolution, isLegend) {
-    let s = [];
-    if (isLegend) {
-      s.push(
-        new Style({
-          image: new Icon({
-            src: require("@/assets/da-diagram.png"),
-            anchor: [0.5, 0.5],
-            scale: 1
+        );
+      }
+      return s;
+    },
+    dataAvailability(feature, resolution, isLegend) {
+      let s = [];
+      if (isLegend) {
+        s.push(
+          new Style({
+            image: new Icon({
+              src: require("@/assets/da-diagram.png"),
+              anchor: [0.5, 0.5],
+              scale: 1
+            })
           })
-        })
-      );
-    } else {
-      // TODO: Get information from feature and check the ranges according to #423, #424, #425
-      let colorWaterlevel = classifications.gmAvailability(feature);
-      let colorComparison = classifications.forecastVsReality(feature);
-      let colorAccuracy = classifications.forecastAccuracy(feature);
-      let maps = store.state.map.openLayersMaps;
-      let geom = feature.getGeometry();
-      if (!(geom instanceof Point)) {
-        geom = new Point(getCenter(feature.getGeometry().getExtent()));
-      }
-      maps.forEach(m => {
+        );
+      } else {
+        // TODO: Get information from feature and check the ranges according to #423, #424, #425
+        let colorWaterlevel = classifications.gmAvailability(feature);
+        let colorComparison = classifications.forecastVsReality(feature);
+        let colorAccuracy = classifications.forecastAccuracy(feature);
+        let map = store.getters["map/openLayersMap"](mapId);
+        let geom = feature.getGeometry();
+        if (!(geom instanceof Point)) {
+          geom = new Point(getCenter(feature.getGeometry().getExtent()));
+        }
         if (
-          (m.getLayer("BOTTLENECKS").getVisible() &&
+          (map.getLayer("BOTTLENECKS").getVisible() &&
             feature.getId().indexOf("bottlenecks") > -1) ||
-          (m.getLayer("SECTIONS").getVisible() &&
+          (map.getLayer("SECTIONS").getVisible() &&
             feature.getId().indexOf("sections") > -1) ||
-          (m.getLayer("STRETCHES").getVisible() &&
+          (map.getLayer("STRETCHES").getVisible() &&
             feature.getId().indexOf("stretches") > -1) ||
-          (m.getLayer("GAUGES").getVisible() &&
+          (map.getLayer("GAUGES").getVisible() &&
             feature.getId().indexOf("gauges") > -1)
         ) {
           let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='white'/>`;
@@ -274,7 +274,7 @@
         }
 
         if (
-          m.getLayer("BOTTLENECKS").getVisible() &&
+          map.getLayer("BOTTLENECKS").getVisible() &&
           feature.getId().indexOf("bottlenecks") > -1
         ) {
           let colorUniformTriangle = classifications.surveyCurrency(feature);
@@ -290,62 +290,62 @@
             })
           );
         }
-      });
-    }
-    return s;
-  },
-  dma(feature, resolution) {
-    if (resolution < 10) {
-      var s = styles.circleBlue;
-      if (resolution < 6) {
-        s.setText(
-          new Text({
-            offsetY: 12,
+      }
+      return s;
+    },
+    dma(feature, resolution) {
+      if (resolution < 10) {
+        var s = styles.circleBlue;
+        if (resolution < 6) {
+          s.setText(
+            new Text({
+              offsetY: 12,
+              font: '10px "Open Sans", "sans-serif"',
+              fill: new Fill({
+                color: "black"
+              }),
+              text: (feature.get("hectometre") / 10).toString()
+            })
+          );
+        }
+        return s;
+      }
+      return [];
+    },
+    gauge(feature, resolution, isLegend) {
+      let waterlevel = feature.get("gm_waterlevel");
+      let text = feature.get("objname");
+      let iconColor = "white";
+      if (waterlevel) {
+        text += "\n(" + waterlevel + " cm)";
+        let refWaterlevels = JSON.parse(feature.get("reference_water_levels"));
+        if (waterlevel < refWaterlevels.LDC) iconColor = "brown";
+        if (waterlevel > refWaterlevels.LDC && waterlevel < refWaterlevels.HDC)
+          iconColor = "blue";
+        if (waterlevel > refWaterlevels.HDC) iconColor = "red";
+      }
+
+      return [
+        new Style({
+          image: new Icon({
+            src: require("@/assets/marker-gauge-" + iconColor + ".png"),
+            anchor: [0.5, isLegend ? 0.5 : 1],
+            scale: isLegend ? 0.5 : 1
+          }),
+          text: new Text({
             font: '10px "Open Sans", "sans-serif"',
+            offsetY: 15,
             fill: new Fill({
               color: "black"
             }),
-            text: (feature.get("hectometre") / 10).toString()
+            backgroundFill: new Fill({
+              color: "rgba(255, 255, 255, 0.7)"
+            }),
+            padding: [2, 2, 2, 2],
+            text
           })
-        );
-      }
-      return s;
-    }
-    return [];
-  },
-  gauge(feature, resolution, isLegend) {
-    let waterlevel = feature.get("gm_waterlevel");
-    let text = feature.get("objname");
-    let iconColor = "white";
-    if (waterlevel) {
-      text += "\n(" + waterlevel + " cm)";
-      let refWaterlevels = JSON.parse(feature.get("reference_water_levels"));
-      if (waterlevel < refWaterlevels.LDC) iconColor = "brown";
-      if (waterlevel > refWaterlevels.LDC && waterlevel < refWaterlevels.HDC)
-        iconColor = "blue";
-      if (waterlevel > refWaterlevels.HDC) iconColor = "red";
+        })
+      ];
     }
-
-    return [
-      new Style({
-        image: new Icon({
-          src: require("@/assets/marker-gauge-" + iconColor + ".png"),
-          anchor: [0.5, isLegend ? 0.5 : 1],
-          scale: isLegend ? 0.5 : 1
-        }),
-        text: new Text({
-          font: '10px "Open Sans", "sans-serif"',
-          offsetY: 15,
-          fill: new Fill({
-            color: "black"
-          }),
-          backgroundFill: new Fill({
-            color: "rgba(255, 255, 255, 0.7)"
-          }),
-          padding: [2, 2, 2, 2],
-          text
-        })
-      })
-    ];
-  }
-};
+  };
+}