diff client/src/components/layers/Layers.vue @ 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 fc008b32c593
children 80037790032d
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];