Mercurial > gemma
changeset 2951:1ac58e024942
client: map layers: optimized setting visibility
this also fixes the issue of sounding result differences being visible initially even though
the layer is disabled. The general problem was that the visibility flag was redundant.
There was a isVisible flag for every layer which then controls the actual visible flag from open layers.
Now only the layer's visibility is set directly in the layer object only.
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Fri, 05 Apr 2019 15:59:52 +0200 |
| parents | 1775ffa65504 |
| children | a3017800e045 |
| files | client/src/components/Maplayer.vue client/src/components/Pdftool.vue client/src/components/layers/Layers.vue client/src/components/layers/Layerselect.vue client/src/store/map.js |
| diffstat | 5 files changed, 48 insertions(+), 82 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Maplayer.vue Fri Apr 05 14:23:19 2019 +0200 +++ b/client/src/components/Maplayer.vue Fri Apr 05 15:59:52 2019 +0200 @@ -129,7 +129,6 @@ return loader; }, updateBottleneckFilter(bottleneck_id, datestr) { - console.log("updating filter with", bottleneck_id, datestr); const layer = this.getLayerByName(LAYERS.BOTTLENECKISOLINE); const wmsSrc = layer.data.getSource(); const exists = bottleneck_id != "does_not_exist"; @@ -144,7 +143,6 @@ "'" }); } - layer.isVisible = exists; layer.data.setVisible(exists); } }, @@ -282,7 +280,6 @@ layer = this.getLayerByName(los); layer.data.getSource().setLoader(loader); - layer.data.setVisible(layer.isVisible); }); // load following layers with bboxStrategy (using our request builder) @@ -301,7 +298,6 @@ layer.data.getSource() ) ); - layer.data.setVisible(layer.isVisible); layer = this.getLayerByName(LAYERS.WATERWAYAXIS); layer.data.getSource().setLoader( @@ -316,7 +312,6 @@ layer.data.getSource() ) ); - layer.data.setVisible(layer.isVisible); layer = this.getLayerByName(LAYERS.WATERWAYPROFILES); layer.data.getSource().setLoader( @@ -331,7 +326,6 @@ layer.data.getSource() ) ); - layer.data.setVisible(layer.isVisible); layer = this.getLayerByName(LAYERS.DISTANCEMARKS); layer.data.getSource().setLoader( @@ -346,7 +340,6 @@ layer.data.getSource() ) ); - layer.data.setVisible(layer.isVisible); layer = this.getLayerByName(LAYERS.DISTANCEMARKSAXIS); layer.data.getSource().setLoader( @@ -361,7 +354,6 @@ layer.data.getSource() ) ); - layer.data.setVisible(layer.isVisible); layer = this.getLayerByName(LAYERS.GAUGES); layer.data.getSource().setLoader( @@ -376,7 +368,6 @@ layer.data.getSource() ) ); - layer.data.setVisible(layer.isVisible); layer = this.getLayerByName(LAYERS.STRETCHES); layer.data.getSource().setLoader( @@ -397,7 +388,6 @@ } ) ); - layer.data.setVisible(layer.isVisible); layer = this.getLayerByName(LAYERS.BOTTLENECKSTATUS); layer.data.getSource().setLoader( @@ -426,7 +416,6 @@ layer.data.getSource() ) ); - layer.data.setVisible(layer.isVisible); HTTP.get("/system/style/Bottlenecks/stroke", { headers: { "X-Gemma-Auth": localStorage.getItem("token") } })
--- a/client/src/components/Pdftool.vue Fri Apr 05 14:23:19 2019 +0200 +++ b/client/src/components/Pdftool.vue Fri Apr 05 15:59:52 2019 +0200 @@ -754,7 +754,7 @@ if ( this.selectedBottleneck && this.selectedSurvey && - this.getLayerByName(LAYERS.BOTTLENECKISOLINE).isVisible + this.getLayerByName(LAYERS.BOTTLENECKISOLINE).data.getVisible() ) { // transforming into an HTMLImageElement only to find out // the width x height of the legend image @@ -793,7 +793,7 @@ if ( this.selectedBottleneck && this.selectedSurvey && - this.getLayerByName(LAYERS.BOTTLENECKISOLINE).isVisible + this.getLayerByName(LAYERS.BOTTLENECKISOLINE).data.getVisible() ) { let survey = this.selectedSurvey;
--- a/client/src/components/layers/Layers.vue Fri Apr 05 14:23:19 2019 +0200 +++ b/client/src/components/layers/Layers.vue Fri Apr 05 15:59:52 2019 +0200 @@ -13,12 +13,11 @@ /> <div class="box-body small"> <Layerselect - v-for="(layer, index) in layersForLegend" - :layerindex="index" - :layername="layer.name" - :key="layer.name" - :isVisible="layer.isVisible" - @visibilityToggled="visibilityToggled" + v-for="(layer, name) in layersForLegend" + :layerindex="name" + :layername="name" + :key="name" + :isVisible="layer.data.getVisible()" ></Layerselect> </div> </div> @@ -55,15 +54,14 @@ return this.$gettext("Layers"); }, layersForLegend() { - return this.$options.LAYOUT.map(el => this.layers[el]); + let orderedLayers = {}; + this.$options.LAYOUT.forEach(el => (orderedLayers[el] = this.layers[el])); + return orderedLayers; } }, methods: { close() { this.$store.commit("application/showLayers", false); - }, - visibilityToggled(layername) { - this.$store.commit("map/toggleVisibilityByName", layername); } }, LAYOUT: [
--- a/client/src/components/layers/Layerselect.vue Fri Apr 05 14:23:19 2019 +0200 +++ b/client/src/components/layers/Layerselect.vue Fri Apr 05 15:59:52 2019 +0200 @@ -75,7 +75,7 @@ }, methods: { visibilityToggled() { - this.$emit("visibilityToggled", this.layername); + this.$store.commit("map/toggleVisibilityByName", this.layername); } }, created() {
--- a/client/src/store/map.js Fri Apr 05 14:23:19 2019 +0200 +++ b/client/src/store/map.js Fri Apr 05 15:59:52 2019 +0200 @@ -83,27 +83,25 @@ differencesLegendImgDataURL: "", layers: { [LAYERS.OPENSTREETMAP]: { - name: LAYERS.OPENSTREETMAP, data: new TileLayer({ + visible: true, source: new OSM() - }), - isVisible: true + }) }, [LAYERS.INLANDECDIS]: { - name: LAYERS.INLANDECDIS, data: new TileLayer({ + visible: true, source: new TileWMS({ preload: 1, url: "https://service.d4d-portal.info/wms/", crossOrigin: "anonymous", params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } }) - }), - isVisible: true + }) }, [LAYERS.WATERWAYAREA]: { - name: LAYERS.WATERWAYAREA, data: new VectorLayer({ + visible: true, source: new VectorSource({ strategy: bboxStrategy }), @@ -113,12 +111,11 @@ width: 2 }) }) - }), - isVisible: true + }) }, [LAYERS.STRETCHES]: { - name: LAYERS.STRETCHES, data: new VectorLayer({ + visible: false, source: new VectorSource({ strategy: bboxStrategy }), @@ -146,12 +143,11 @@ return style; } - }), - isVisible: false + }) }, [LAYERS.FAIRWAYDIMENSIONSLOS3]: { - name: LAYERS.FAIRWAYDIMENSIONSLOS3, data: new VectorLayer({ + visible: true, source: new VectorSource(), style: function() { return [ @@ -177,12 +173,11 @@ }) ]; } - }), - isVisible: true + }) }, [LAYERS.FAIRWAYDIMENSIONSLOS2]: { - name: LAYERS.FAIRWAYDIMENSIONSLOS2, data: new VectorLayer({ + visible: false, source: new VectorSource(), style: function() { return [ @@ -210,12 +205,11 @@ }) ]; } - }), - isVisible: false + }) }, [LAYERS.FAIRWAYDIMENSIONSLOS1]: { - name: LAYERS.FAIRWAYDIMENSIONSLOS1, data: new VectorLayer({ + visible: false, source: new VectorSource(), style: function() { return [ @@ -243,12 +237,11 @@ }) ]; } - }), - isVisible: false + }) }, [LAYERS.WATERWAYAXIS]: { - name: LAYERS.WATERWAYAXIS, data: new VectorLayer({ + visible: true, source: new VectorSource({ strategy: bboxStrategy }), @@ -263,12 +256,11 @@ // resolution. maxResolution: 5, minResolution: 0 - }), - isVisible: true + }) }, [LAYERS.WATERWAYPROFILES]: { - name: LAYERS.WATERWAYPROFILES, data: new VectorLayer({ + visible: true, source: new VectorSource({ strategy: bboxStrategy }), @@ -281,12 +273,11 @@ }), maxResolution: 2.5, minResolution: 0 - }), - isVisible: true + }) }, [LAYERS.BOTTLENECKS]: { - name: LAYERS.BOTTLENECKS, data: new VectorLayer({ + visible: true, source: new VectorSource({ strategy: bboxStrategy }), @@ -301,12 +292,11 @@ }) }); } - }), - isVisible: true + }) }, [LAYERS.BOTTLENECKISOLINE]: { - name: LAYERS.BOTTLENECKISOLINE, data: new TileLayer({ + visible: false, source: new TileWMS({ preload: 0, projection: "EPSG:3857", @@ -328,12 +318,11 @@ }); } // TODO tile.setState(TileState.ERROR); }) - }), - isVisible: false + }) }, [LAYERS.DIFFERENCES]: { - name: LAYERS.DIFFERENCES, data: new TileLayer({ + visible: false, source: new TileWMS({ preload: 0, projection: "EPSG:4326", @@ -355,13 +344,12 @@ }); } // TODO tile.setState(TileState.ERROR); }) - }), - isVisible: false + }) }, [LAYERS.BOTTLENECKSTATUS]: { - name: LAYERS.BOTTLENECKSTATUS, forLegendStyle: { point: true, resolution: 16 }, data: new VectorLayer({ + visible: true, source: new VectorSource({ strategy: bboxStrategy }), @@ -392,23 +380,21 @@ } return styles; } - }), - isVisible: true + }) }, [LAYERS.DISTANCEMARKS]: { - name: LAYERS.DISTANCEMARKS, forLegendStyle: { point: true, resolution: 8 }, data: new VectorLayer({ + visible: false, source: new VectorSource({ strategy: bboxStrategy }) - }), - isVisible: false + }) }, [LAYERS.DISTANCEMARKSAXIS]: { - name: LAYERS.DISTANCEMARKSAXIS, forLegendStyle: { point: true, resolution: 8 }, data: new VectorLayer({ + visible: true, source: new VectorSource({ strategy: bboxStrategy }), @@ -438,13 +424,12 @@ return []; } } - }), - isVisible: true + }) }, [LAYERS.GAUGES]: { - name: LAYERS.GAUGES, forLegendStyle: { point: true, resolution: 8 }, data: new VectorLayer({ + visible: true, source: new VectorSource({ strategy: bboxStrategy }), @@ -480,12 +465,11 @@ }, maxResolution: 100, minResolution: 0 - }), - isVisible: true + }) }, [LAYERS.DRAWTOOL]: { - name: LAYERS.DRAWTOOL, data: new VectorLayer({ + visible: true, source: new VectorSource({ wrapX: false }), style: function(feature) { // adapted from OpenLayer's LineString Arrow Example @@ -527,12 +511,11 @@ } return styles; } - }), - isVisible: true + }) }, [LAYERS.CUTTOOL]: { - name: LAYERS.CUTTOOL, data: new VectorLayer({ + visible: true, source: new VectorSource({ wrapX: false }), style: function(feature) { // adapted from OpenLayer's LineString Arrow Example @@ -575,8 +558,7 @@ } return styles; } - }), - isVisible: true + }) } } }; @@ -605,16 +587,13 @@ state.extent = extent; }, setLayerVisible: (state, name) => { - state.layers[name].isVisible = true; state.layers[name].data.setVisible(true); }, setLayerInvisible: (state, name) => { - state.layers[name].isVisible = false; state.layers[name].data.setVisible(false); }, toggleVisibilityByName: (state, name) => { - state.layers[name].isVisible = !state.layers[name].isVisible; - state.layers[name].data.setVisible(state.layers[name].isVisible); + state.layers[name].data.setVisible(!state.layers[name].data.getVisible()); }, openLayersMap: (state, map) => { state.openLayersMap = map;