changeset 882:27282bfd1ba7

client: make LegendElement more dynamic * Refactor LegendElement to watch the style and update accordingly.
author Bernhard Reiter <bernhard@intevation.de>
date Mon, 01 Oct 2018 13:51:31 +0200
parents 52fe3e20f750
children f237192ad94c
files client/src/layers/LegendElement.vue
diffstat 1 files changed, 33 insertions(+), 13 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/layers/LegendElement.vue	Mon Oct 01 12:01:46 2018 +0200
+++ b/client/src/layers/LegendElement.vue	Mon Oct 01 13:51:31 2018 +0200
@@ -18,6 +18,7 @@
   props: ["layername", "layerindex"],
   data: function() {
     return {
+      myMap: null,
       mapLayer: null
     };
   },
@@ -25,6 +26,22 @@
     ...mapGetters("mapstore", ["getLayerByName"]),
     id() {
       return "legendelement" + this.layerindex;
+    },
+    mstyle() {
+      if (this.mapLayer && this.mapLayer.data.getStyle) {
+        return this.mapLayer.data.getStyle();
+      }
+    }
+  },
+  watch: {
+    mstyle(newStyle, oldStyle) {
+      // only recreate if there already was a style before
+      if (oldStyle) {
+        let vector = this.createVectorLayer();
+
+        this.myMap.removeLayer(this.myMap.getLayers()[0]);
+        this.myMap.addLayer(vector);
+      }
     }
   },
   mounted() {
@@ -37,6 +54,21 @@
   },
   methods: {
     initMap() {
+      let vector = this.createVectorLayer();
+
+      this.myMap = new Map({
+        layers: [vector],
+        target: this.id,
+        controls: [],
+        interactions: [],
+        view: new View({
+          center: [0, 0],
+          zoom: 3,
+          projection: "EPSG:4326"
+        })
+      });
+    },
+    createVectorLayer() {
       let mapStyle = this.mapLayer.data.getStyle();
 
       let feature = new Feature({
@@ -60,25 +92,13 @@
       // this.mapLayer["forLegendStyle"] for it.
       // FIXME, this is a special case for the Fairway Dimensions style
       feature.set("level_of_service", "");
-      var vector = new VectorLayer({
+      return new VectorLayer({
         source: new VectorSource({
           features: [feature],
           wrapX: false
         }),
         style: mapStyle
       });
-
-      new Map({
-        layers: [vector],
-        target: this.id,
-        controls: [],
-        interactions: [],
-        view: new View({
-          center: [0, 0],
-          zoom: 3,
-          projection: "EPSG:4326"
-        })
-      });
     }
   }
 };