Mercurial > gemma

changeset 3181:c122a064fd5e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 }) {