changeset 3547:47c61ea894b1

client: map layers: share same vector source object for layers that use the same geoserver view (bottlenecks_geoserver) The layers Bottlenecks, Critical Bottlenecks and Bottlenecks Fairway Availability used the exact same geoserver_view/data. Thus the vector source object can be shared to avoid multiple identical requests. Unfortunately this does not work across maps. So each map has it's own vector source object for the three bottleneck layers.
author Markus Kottlaender <markus@intevation.de>
date Fri, 31 May 2019 12:20:08 +0200
parents 7ffc42bb6ec5
children f3102fa16a69
files client/src/components/map/layers.js
diffstat 1 files changed, 52 insertions(+), 70 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/map/layers.js	Fri May 31 11:19:38 2019 +0200
+++ b/client/src/components/map/layers.js	Fri May 31 12:20:08 2019 +0200
@@ -163,6 +163,55 @@
 });
 
 export default function() {
+  // Shared feature source for layers:
+  // BOTTLENECKS, BOTTLENECKSTATUS and BOTTLENECKFAIRWAYAVAILABILITY
+  // Reduces bottlenecks_geoserver requests and number of stored feature objects.
+  const bottlenecksSource = new VectorSource({ strategy: bboxStrategy });
+  bottlenecksSource.setLoader(
+    buildVectorLoader(
+      {
+        featureTypes: ["bottlenecks_geoserver"],
+        geometryName: "area"
+      },
+      bottlenecksSource,
+      false,
+      async (f, store) => {
+        if (f.get("fa_critical")) {
+          // look for fairway availability data in store. If present and
+          // not older than 15 min use it or fetch new data and store it.
+          let data = store.getters["fairwayavailability/fwLNWLOverviewData"](f);
+          if (
+            data &&
+            new Date().getTime() - data.createdAt.getTime() < 900000
+          ) {
+            f.set("fa_data", data.data);
+          } else {
+            let date = new Date();
+            data = await store.dispatch(
+              "fairwayavailability/loadAvailableFairwayDepthLNWLForMap",
+              {
+                feature: f,
+                from: date.toISOString().split("T")[0],
+                to: date.toISOString().split("T")[0],
+                frequency: "monthly",
+                LOS: 3
+              }
+            );
+            if (data) {
+              store.commit("fairwayavailability/addFwLNWLOverviewData", {
+                feature: f,
+                data,
+                createdAt: new Date()
+              });
+              f.set("fa_data", data);
+            }
+          }
+        }
+        return f;
+      }
+    )
+  );
+
   return {
     get(id) {
       return this.config.find(l => l.get("id") === id);
@@ -369,22 +418,12 @@
         });
       })(),
       (function() {
-        const source = new VectorSource({ strategy: bboxStrategy });
-        source.setLoader(
-          buildVectorLoader(
-            {
-              featureTypes: ["bottlenecks_geoserver"],
-              geometryName: "area"
-            },
-            source
-          )
-        );
         return new VectorLayer({
           id: "BOTTLENECKS",
           label: "Bottlenecks",
           visible: true,
           style: styles.bottleneck,
-          source
+          source: bottlenecksSource
         });
       })(),
       new TileLayer({
@@ -440,16 +479,6 @@
         })
       }),
       (function() {
-        const source = new VectorSource({ strategy: bboxStrategy });
-        source.setLoader(
-          buildVectorLoader(
-            {
-              featureTypes: ["bottlenecks_geoserver"],
-              geometryName: "area"
-            },
-            source
-          )
-        );
         return new VectorLayer({
           id: "BOTTLENECKSTATUS",
           label: "Critical Bottlenecks",
@@ -457,57 +486,10 @@
           visible: true,
           zIndex: 1,
           style: styles.bottleneckStatus,
-          source
+          source: bottlenecksSource
         });
       })(),
       (function() {
-        const source = new VectorSource({ strategy: bboxStrategy });
-        source.setLoader(
-          buildVectorLoader(
-            {
-              featureTypes: ["bottlenecks_geoserver"],
-              geometryName: "area"
-            },
-            source,
-            false,
-            async (f, store) => {
-              if (f.get("fa_critical")) {
-                // look for fairway availability data in store. If present and
-                // not older than 15 min use it or fetch new data and store it.
-                let data = store.getters[
-                  "fairwayavailability/fwLNWLOverviewData"
-                ](f);
-                if (
-                  data &&
-                  new Date().getTime() - data.createdAt.getTime() < 900000
-                ) {
-                  f.set("fa_data", data.data);
-                } else {
-                  let date = new Date();
-                  data = await store.dispatch(
-                    "fairwayavailability/loadAvailableFairwayDepthLNWLForMap",
-                    {
-                      feature: f,
-                      from: date.toISOString().split("T")[0],
-                      to: date.toISOString().split("T")[0],
-                      frequency: "monthly",
-                      LOS: 3
-                    }
-                  );
-                  if (data) {
-                    store.commit("fairwayavailability/addFwLNWLOverviewData", {
-                      feature: f,
-                      data,
-                      createdAt: new Date()
-                    });
-                    f.set("fa_data", data);
-                  }
-                }
-              }
-              return f;
-            }
-          )
-        );
         return new VectorLayer({
           id: "BOTTLENECKFAIRWAYAVAILABILITY",
           label: "Bottlenecks Fairway Availability",
@@ -515,7 +497,7 @@
           visible: false,
           zIndex: 1,
           style: styles.bottleneckFairwayAvailability,
-          source
+          source: bottlenecksSource
         });
       })(),
       (function() {