Mercurial > gemma

changeset 2870:35f6e4383161

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
layer structure overhaul
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 29 Mar 2019 13:37:17 +0100
parents 02f51054f648
children 2cdf43c84a8c
files client/src/components/Maplayer.vue client/src/components/layers/Layers.vue client/src/store/map.js
diffstat 3 files changed, 73 insertions(+), 77 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Maplayer.vue	Fri Mar 29 13:20:58 2019 +0100
+++ b/client/src/components/Maplayer.vue	Fri Mar 29 13:37:17 2019 +0100
@@ -167,8 +167,9 @@
     }
   },
   mounted() {
+    const Layers = Object.keys(this.layers).map(x => this.layers[x].data);
     let map = new Map({
-      layers: [...this.layers.map(x => x.data)],
+      layers: [...Layers],
       target: "map",
       controls: [],
       view: new View({
--- a/client/src/components/layers/Layers.vue	Fri Mar 29 13:20:58 2019 +0100
+++ b/client/src/components/layers/Layers.vue	Fri Mar 29 13:37:17 2019 +0100
@@ -40,17 +40,22 @@
  * Thomas Junk <thomas.junk@intevation.de>
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapGetters, mapState } from "vuex";
+import { mapState } from "vuex";
+import { LAYERS } from "@/store/map.js";
+
 export default {
   name: "layers",
   components: {
     Layerselect: () => import("./Layerselect")
   },
   computed: {
-    ...mapGetters("map", ["layersForLegend"]),
+    ...mapState("map", ["layers"]),
     ...mapState("application", ["showLayers"]),
     layersLabel() {
       return this.$gettext("Layers");
+    },
+    layersForLegend() {
+      return this.$options.LAYOUT.map(el => this.layers[el]);
     }
   },
   methods: {
@@ -60,6 +65,24 @@
     visibilityToggled(layername) {
       this.$store.commit("map/toggleVisibilityByName", layername);
     }
-  }
+  },
+  LAYOUT: [
+    LAYERS.OPENSTREETMAP,
+    LAYERS.INLANDECDIS,
+    LAYERS.WATERWAYAREA,
+    LAYERS.STRETCHES,
+    LAYERS.FAIRWAYDIMENSIONSLOS3,
+    LAYERS.FAIRWAYDIMENSIONSLOS2,
+    LAYERS.FAIRWAYDIMENSIONSLOS1,
+    LAYERS.WATERWAYAXIS,
+    LAYERS.WATERWAYPROFILES,
+    LAYERS.BOTTLENECKS,
+    LAYERS.BOTTLENECKISOLINE,
+    LAYERS.DIFFERENCES,
+    LAYERS.BOTTLENECKSTATUS,
+    LAYERS.DISTANCEMARKS,
+    LAYERS.DISTANCEMARKSAXIS,
+    LAYERS.GAUGES
+  ]
 };
 </script>
--- a/client/src/store/map.js	Fri Mar 29 13:20:58 2019 +0100
+++ b/client/src/store/map.js	Fri Mar 29 13:37:17 2019 +0100
@@ -80,16 +80,15 @@
     polygonTool: null, // open layers interaction object (Draw)
     cutTool: null, // open layers interaction object (Draw)
     isolinesLegendImgDataURL: "",
-    layers: [
-      {
+    layers: {
+      [LAYERS.OPENSTREETMAP]: {
         name: LAYERS.OPENSTREETMAP,
         data: new TileLayer({
           source: new OSM()
         }),
-        isVisible: true,
-        showInLegend: true
+        isVisible: true
       },
-      {
+      [LAYERS.INLANDECDIS]: {
         name: LAYERS.INLANDECDIS,
         data: new TileLayer({
           source: new TileWMS({
@@ -99,10 +98,9 @@
             params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
           })
         }),
-        isVisible: true,
-        showInLegend: true
+        isVisible: true
       },
-      {
+      [LAYERS.WATERWAYAREA]: {
         name: LAYERS.WATERWAYAREA,
         data: new VectorLayer({
           source: new VectorSource({
@@ -115,10 +113,9 @@
             })
           })
         }),
-        isVisible: true,
-        showInLegend: true
+        isVisible: true
       },
-      {
+      [LAYERS.STRETCHES]: {
         name: LAYERS.STRETCHES,
         data: new VectorLayer({
           source: new VectorSource({
@@ -134,10 +131,9 @@
             })
           })
         }),
-        isVisible: false,
-        showInLegend: true
+        isVisible: false
       },
-      {
+      [LAYERS.FAIRWAYDIMENSIONSLOS3]: {
         name: LAYERS.FAIRWAYDIMENSIONSLOS3,
         data: new VectorLayer({
           source: new VectorSource(),
@@ -166,10 +162,9 @@
             ];
           }
         }),
-        isVisible: true,
-        showInLegend: true
+        isVisible: true
       },
-      {
+      [LAYERS.FAIRWAYDIMENSIONSLOS2]: {
         name: LAYERS.FAIRWAYDIMENSIONSLOS2,
         data: new VectorLayer({
           source: new VectorSource(),
@@ -200,10 +195,9 @@
             ];
           }
         }),
-        isVisible: false,
-        showInLegend: true
+        isVisible: false
       },
-      {
+      [LAYERS.FAIRWAYDIMENSIONSLOS1]: {
         name: LAYERS.FAIRWAYDIMENSIONSLOS1,
         data: new VectorLayer({
           source: new VectorSource(),
@@ -234,10 +228,9 @@
             ];
           }
         }),
-        isVisible: false,
-        showInLegend: true
+        isVisible: false
       },
-      {
+      [LAYERS.WATERWAYAXIS]: {
         name: LAYERS.WATERWAYAXIS,
         data: new VectorLayer({
           source: new VectorSource({
@@ -255,10 +248,9 @@
           maxResolution: 5,
           minResolution: 0
         }),
-        isVisible: true,
-        showInLegend: true
+        isVisible: true
       },
-      {
+      [LAYERS.WATERWAYPROFILES]: {
         name: LAYERS.WATERWAYPROFILES,
         data: new VectorLayer({
           source: new VectorSource({
@@ -274,10 +266,9 @@
           maxResolution: 2.5,
           minResolution: 0
         }),
-        isVisible: true,
-        showInLegend: true
+        isVisible: true
       },
-      {
+      [LAYERS.BOTTLENECKS]: {
         name: LAYERS.BOTTLENECKS,
         data: new VectorLayer({
           source: new VectorSource({
@@ -295,10 +286,9 @@
             });
           }
         }),
-        isVisible: true,
-        showInLegend: true
+        isVisible: true
       },
-      {
+      [LAYERS.BOTTLENECKISOLINE]: {
         name: LAYERS.BOTTLENECKISOLINE,
         data: new TileLayer({
           source: new TileWMS({
@@ -323,10 +313,9 @@
             } // TODO  tile.setState(TileState.ERROR);
           })
         }),
-        isVisible: false,
-        showInLegend: true
+        isVisible: false
       },
-      {
+      [LAYERS.DIFFERENCES]: {
         name: LAYERS.DIFFERENCES,
         data: new TileLayer({
           source: new TileWMS({
@@ -351,10 +340,9 @@
             } // TODO  tile.setState(TileState.ERROR);
           })
         }),
-        isVisible: false,
-        showInLegend: true
+        isVisible: false
       },
-      {
+      [LAYERS.BOTTLENECKSTATUS]: {
         name: LAYERS.BOTTLENECKSTATUS,
         forLegendStyle: { point: true, resolution: 16 },
         data: new VectorLayer({
@@ -389,10 +377,9 @@
             return styles;
           }
         }),
-        isVisible: true,
-        showInLegend: true
+        isVisible: true
       },
-      {
+      [LAYERS.DISTANCEMARKS]: {
         name: LAYERS.DISTANCEMARKS,
         forLegendStyle: { point: true, resolution: 8 },
         data: new VectorLayer({
@@ -400,10 +387,9 @@
             strategy: bboxStrategy
           })
         }),
-        isVisible: false,
-        showInLegend: true
+        isVisible: false
       },
-      {
+      [LAYERS.DISTANCEMARKSAXIS]: {
         name: LAYERS.DISTANCEMARKSAXIS,
         forLegendStyle: { point: true, resolution: 8 },
         data: new VectorLayer({
@@ -437,10 +423,9 @@
             }
           }
         }),
-        isVisible: true,
-        showInLegend: true
+        isVisible: true
       },
-      {
+      [LAYERS.GAUGES]: {
         name: LAYERS.GAUGES,
         forLegendStyle: { point: true, resolution: 8 },
         data: new VectorLayer({
@@ -480,10 +465,9 @@
           maxResolution: 100,
           minResolution: 0
         }),
-        isVisible: true,
-        showInLegend: true
+        isVisible: true
       },
-      {
+      [LAYERS.DRAWTOOL]: {
         name: LAYERS.DRAWTOOL,
         data: new VectorLayer({
           source: new VectorSource({ wrapX: false }),
@@ -528,10 +512,9 @@
             return styles;
           }
         }),
-        isVisible: true,
-        showInLegend: false
+        isVisible: true
       },
-      {
+      [LAYERS.CUTTOOL]: {
         name: LAYERS.CUTTOOL,
         data: new VectorLayer({
           source: new VectorSource({ wrapX: false }),
@@ -577,10 +560,9 @@
             return styles;
           }
         }),
-        isVisible: true,
-        showInLegend: false
+        isVisible: true
       }
-    ]
+    }
   };
 };
 
@@ -589,11 +571,8 @@
   namespaced: true,
   state: init(),
   getters: {
-    layersForLegend: state => {
-      return state.layers.filter(layer => layer.showInLegend);
-    },
     getLayerByName: state => name => {
-      return state.layers.find(layer => layer.name === name);
+      return state.layers[name];
     },
     getVSourceByName: (state, getters) => name => {
       return getters.getLayerByName(name).data.getSource();
@@ -610,23 +589,16 @@
       state.extent = extent;
     },
     setLayerVisible: (state, name) => {
-      const layer = state.layers.findIndex(l => l.name === name);
-      state.layers[layer].isVisible = true;
-      state.layers[layer].data.setVisible(true);
+      state.layers[name].isVisible = true;
+      state.layers[name].data.setVisible(true);
     },
     setLayerInvisible: (state, name) => {
-      const layer = state.layers.findIndex(l => l.name === name);
-      state.layers[layer].isVisible = false;
-      state.layers[layer].data.setVisible(false);
+      state.layers[name].isVisible = false;
+      state.layers[name].data.setVisible(false);
     },
     toggleVisibilityByName: (state, name) => {
-      const layer = state.layers.findIndex(l => l.name === name);
-      state.layers[layer].isVisible = !state.layers[layer].isVisible;
-      state.layers[layer].data.setVisible(state.layers[layer].isVisible);
-    },
-    toggleVisibility: (state, layer) => {
-      state.layers[layer].isVisible = !state.layers[layer].isVisible;
-      state.layers[layer].data.setVisible(state.layers[layer].isVisible);
+      state.layers[name].isVisible = !state.layers[name].isVisible;
+      state.layers[name].data.setVisible(state.layers[name].isVisible);
     },
     openLayersMap: (state, map) => {
       state.openLayersMap = map;