Mercurial > gemma
changeset 2870:35f6e4383161
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;