Mercurial > gemma
changeset 3181:c122a064fd5e
client: map: fixed loading animation for layers
Zooming out to the user specific map extent right after the map has been rendered initially
interrupts the loading process for layers with a maxResolution that is exceeded by that.
This leads to the loading flag of the layer source to be never set to false until you zoom
to a resolution where these layers are active again. This is an unexpected behavior that will
be reported to upstream. (https://github.com/openlayers/openlayers/issues/9503)
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 07 May 2019 14:54:16 +0200 |
parents | 429e28295902 |
children | 77fc44ad05e3 |
files | client/src/components/layers/Layers.vue client/src/components/map/Map.vue client/src/store/map.js |
diffstat | 3 files changed, 58 insertions(+), 50 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/layers/Layers.vue Tue May 07 14:06:23 2019 +0200 +++ b/client/src/components/layers/Layers.vue Tue May 07 14:54:16 2019 +0200 @@ -11,7 +11,10 @@ :title="label" :closeCallback="close" :actions="[ - { callback: refreshLayers, icon: mapsLoading ? 'spinner' : 'sync' } + { + callback: refreshLayers, + icon: sourcesLoading ? 'spinner' : 'sync' + } ]" /> <div class="small" v-if="openLayersMaps.length"> @@ -61,9 +64,19 @@ }, computed: { ...mapState("application", ["showLayers"]), - ...mapState("map", ["openLayersMaps", "mapsLoading"]), + ...mapState("map", ["openLayersMaps"]), label() { return this.$gettext("Layers"); + }, + sourcesLoading() { + let counter = 0; + this.openLayersMaps.forEach(map => { + let layers = map.getLayers().getArray(); + for (let i = 0; i < layers.length; i++) { + if (layers[i].getSource().loading) counter++; + } + }); + return counter; } }, methods: { @@ -72,7 +85,6 @@ }, refreshLayers() { this.openLayersMaps.forEach(map => { - this.$store.commit("map/increaseMapsLoading"); let layers = map.getLayers().getArray(); for (let i = 0; i < layers.length; i++) { let layer = layers[i];
--- a/client/src/components/map/Map.vue Tue May 07 14:06:23 2019 +0200 +++ b/client/src/components/map/Map.vue Tue May 07 14:54:16 2019 +0200 @@ -160,6 +160,44 @@ }) ); } + + // move to user specific default extent if map loads for the first time + // checking initialLoad will be obsolete once we abandoned the separated admin context + if (this.initialLoad) { + this.$store.commit("map/initialLoad", false); + var currentUser = this.$store.state.user.user; + HTTP.get("/users/" + currentUser, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + }) + .then(response => { + this.mountMap(); + this.$store.dispatch("map/moveToBoundingBox", { + boundingBox: [ + response.data.extent.x1, + response.data.extent.y1, + response.data.extent.x2, + response.data.extent.y2 + ], + zoom: 17, + preventZoomOut: true, + duration: 0 + }); + }) + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + } else { + this.mountMap(); + } + }, + mountMap() { this.map = new Map({ layers: this.layers.config, target: "map-" + this.paneId, @@ -176,10 +214,6 @@ }); this.map.getLayer = id => this.layers.get(id); - this.map.on("rendercomplete", () => { - this.$store.commit("map/decreaseMapsLoading"); - }); - // store map position on every move // will be obsolete once we abandoned the separated admin context this.map.on("moveend", event => { @@ -191,39 +225,6 @@ }); }); this.$store.dispatch("map/openLayersMap", this.map); - - // move to user specific default extent if map loads for the first time - // checking initialLoad will be obsolete once we abandoned the separated admin context - if (this.initialLoad) { - this.$store.commit("map/initialLoad", false); - var currentUser = this.$store.state.user.user; - HTTP.get("/users/" + currentUser, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" - } - }) - .then(response => { - this.$store.dispatch("map/moveToBoundingBox", { - boundingBox: [ - response.data.extent.x1, - response.data.extent.y1, - response.data.extent.x2, - response.data.extent.y2 - ], - zoom: 17, - preventZoomOut: true - }); - }) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); - } - this.$store.dispatch("map/initIdentifyTool", this.map); } },
--- a/client/src/store/map.js Tue May 07 14:06:23 2019 +0200 +++ b/client/src/store/map.js Tue May 07 14:54:16 2019 +0200 @@ -32,7 +32,6 @@ openLayersMaps: [], syncedMaps: [], syncedView: null, - mapsLoading: 0, initialLoad: true, extent: { lat: 6155376, @@ -64,13 +63,6 @@ } }, mutations: { - increaseMapsLoading: state => { - state.mapsLoading++; - }, - decreaseMapsLoading: state => { - state.mapsLoading--; - if (state.mapsLoading < 0) state.mapsLoading = 0; - }, initialLoad: (state, initialLoad) => { state.initialLoad = initialLoad; }, @@ -526,13 +518,16 @@ } }); }, - moveToBoundingBox({ state }, { boundingBox, zoom, preventZoomOut }) { + moveToBoundingBox( + { state }, + { boundingBox, zoom, preventZoomOut, duration } + ) { const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857"); const currentZoom = state.syncedView.getZoom(); zoom = zoom || currentZoom; state.syncedView.fit(extent, { maxZoom: preventZoomOut ? Math.max(zoom, currentZoom) : zoom, - duration: 700 + duration: duration || 700 }); }, moveToFeauture({ dispatch }, { feature, zoom, preventZoomOut }) {