Mercurial > gemma

changeset 2996:888a3454c3ae

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Extracted WFS style functions and styles to avoid massive memory allocation.
author Raimund Renkert <raimund.renkert@intevation.de>
date Wed, 10 Apr 2019 15:17:06 +0200
parents 5222bfe5b4af
children 707e1bc24d93
files client/src/store/map.js
diffstat 1 files changed, 207 insertions(+), 194 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/store/map.js	Wed Apr 10 15:15:00 2019 +0200
+++ b/client/src/store/map.js	Wed Apr 10 15:17:06 2019 +0200
@@ -42,6 +42,205 @@
   });
 };
 
+const blue1 = new Style({
+  stroke: new Stroke({
+    color: "rgba(0, 0, 255, 0.8)",
+    lineDash: [2, 4],
+    lineCap: "round",
+    width: 2
+  }),
+  fill: new Fill({
+    color: "rgba(240, 230, 0, 0.2)"
+  })
+});
+const blue2 = new Style({
+  stroke: new Stroke({
+    color: "rgba(0, 0, 255, 0.9)",
+    lineDash: [3, 6],
+    lineCap: "round",
+    width: 2
+  }),
+  fill: new Fill({
+    color: "rgba(240, 230, 0, 0.1)"
+  })
+});
+const blue3 = new Style({
+  stroke: new Stroke({
+    color: "rgba(0, 0, 255, 1.0)",
+    width: 2
+  }),
+  fill: new Fill({
+    color: "rgba(255, 255, 255, 0.4)"
+  })
+});
+const yellow1 = new Style({
+  stroke: new Stroke({
+    color: "rgba(230, 230, 10, .8)",
+    width: 4
+  }),
+  fill: new Fill({
+    color: "rgba(230, 230, 10, .3)"
+  })
+});
+const yellow2 = new Style({
+  stroke: new Stroke({
+    color: "rgba(250, 200, 0, .8)",
+    width: 2
+  }),
+  fill: new Fill({
+    color: "rgba(250, 200, 10, .3)"
+  })
+});
+const yellow3 = new Style({
+  stroke: new Stroke({
+    color: "rgba(250, 240, 10, .9)",
+    width: 5
+  }),
+  fill: new Fill({
+    color: "rgba(250, 240, 0, .7)"
+  })
+});
+const red1 = new Style({
+  stroke: new Stroke({
+    color: "rgba(255, 0, 0, 1)",
+    width: 4
+  })
+})
+
+const circleBlue = new Style({
+  image: new Circle({
+    radius: 5,
+    fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }),
+    stroke: new Stroke({ color: "blue", width: 1 })
+  })
+});
+
+const textFW1 = new Style({
+  text: new Text({
+    font: 'bold 12px "Open Sans", "sans-serif"',
+    placement: "line",
+    fill: new Fill({
+      color: "black"
+    }),
+    text: "LOS: 1"
+    //, zIndex: 10
+  })
+});
+const textFW2 = new Style({
+  text: new Text({
+    font: 'bold 12px "Open Sans", "sans-serif"',
+    placement: "line",
+    fill: new Fill({
+      color: "black"
+    }),
+    text: "LOS: 2"
+    //, zIndex: 10
+  })
+});
+const textFW3 = new Style({
+  text: new Text({
+    font: 'bold 12px "Open Sans", "sans-serif"',
+    placement: "line",
+    fill: new Fill({
+      color: "black"
+    }),
+    text: "LOS: 3"
+    //, zIndex: 10
+  })
+});
+
+const stretchesStyle = feature => {
+  let style = yellow2;
+  if (feature.get("highlighted")) {
+    style = yellow3;
+  }
+  return style;
+};
+const fwd1Style = () => {
+  return [blue1, textFW1];
+};
+const fwd2Style = () => {
+  return [blue2, textFW2];
+};
+const fwd3Style = () => {
+  return [blue3, textFW3];
+};
+const bottleneckStyle = () => {
+  return yellow1;
+};
+const bottleneckStatusStyle = (feature, resolution, isLegend) => {
+  let styles = [];
+  if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
+    let bnCenter = getCenter(feature.getGeometry().getExtent());
+    styles.push(
+      new Style({
+        geometry: new Point(bnCenter),
+        image: new Icon({
+          src: require("@/assets/marker-bottleneck-critical.png"),
+          anchor: [0.5, 0.5],
+          scale: isLegend ? 0.5 : 1
+        })
+      })
+    );
+  }
+  if (feature.get("fa_critical") && !isLegend) {
+    styles.push(red1);
+  }
+  return styles;
+};
+const dmaStyle = (feature, resolution) => {
+  if (resolution < 10) {
+    var s = circleBlue;
+    if (resolution < 6) {
+      s.setText(
+        new Text({
+          offsetY: 12,
+          font: '10px "Open Sans", "sans-serif"',
+          fill: new Fill({
+            color: "black"
+          }),
+          text: (feature.get("hectometre") / 10).toString()
+        })
+      );
+    }
+    return s;
+  } else {
+    return [];
+  }
+}
+const gaugeStyle = (feature, resolution, isLegend) => {
+  return [
+    new Style({
+      image: new Icon({
+        src: require("@/assets/marker-gauge.png"),
+        anchor: [0.5, isLegend ? 0.5 : 1],
+        scale: isLegend ? 0.5 : 1
+      }),
+      text: new Text({
+        font: '10px "Open Sans", "sans-serif"',
+        offsetY: 8,
+        fill: new Fill({
+          color: "white"
+        }),
+        text: feature.get("objname")
+      })
+    }),
+    new Style({
+      text: new Text({
+        font: '10px "Open Sans", "sans-serif"',
+        offsetY: 7,
+        offsetX: -1,
+        fill: new Fill({
+          color: "black"
+        }),
+        text: feature.get("objname")
+      })
+    })
+  ];
+};
+
+
+
 // initial state
 const init = () => {
   return {
@@ -95,121 +294,25 @@
         source: new VectorSource({
           strategy: bboxStrategy
         }),
-        style: feature => {
-          let style = new Style({
-            stroke: new Stroke({
-              color: "rgba(250, 200, 0, .8)",
-              width: 2
-            }),
-            fill: new Fill({
-              color: "rgba(250, 200, 10, .3)"
-            })
-          });
-          if (feature.get("highlighted")) {
-            style = new Style({
-              stroke: new Stroke({
-                color: "rgba(250, 240, 10, .9)",
-                width: 5
-              }),
-              fill: new Fill({
-                color: "rgba(250, 240, 0, .7)"
-              })
-            });
-          }
-
-          return style;
-        }
+        style: stretchesStyle
       }),
       FAIRWAYDIMENSIONSLOS1: new VectorLayer({
         label: "LOS 1 Fairway Dimensions",
         visible: false,
         source: new VectorSource(),
-        style: function() {
-          return [
-            new Style({
-              stroke: new Stroke({
-                color: "rgba(0, 0, 255, 0.8)",
-                lineDash: [2, 4],
-                lineCap: "round",
-                width: 2
-              }),
-              fill: new Fill({
-                color: "rgba(240, 230, 0, 0.2)"
-              })
-            }),
-            new Style({
-              text: new Text({
-                font: 'bold 12px "Open Sans", "sans-serif"',
-                placement: "line",
-                fill: new Fill({
-                  color: "black"
-                }),
-                text: "LOS: 1"
-                //, zIndex: 10
-              })
-            })
-          ];
-        }
+        style: fwd1Style
       }),
       FAIRWAYDIMENSIONSLOS2: new VectorLayer({
         label: "LOS 2 Fairway Dimensions",
         visible: false,
         source: new VectorSource(),
-        style: function() {
-          return [
-            new Style({
-              stroke: new Stroke({
-                color: "rgba(0, 0, 255, 0.9)",
-                lineDash: [3, 6],
-                lineCap: "round",
-                width: 2
-              }),
-              fill: new Fill({
-                color: "rgba(240, 230, 0, 0.1)"
-              })
-            }),
-            new Style({
-              text: new Text({
-                font: 'bold 12px "Open Sans", "sans-serif"',
-                placement: "line",
-                fill: new Fill({
-                  color: "black"
-                }),
-                text: "LOS: 2"
-                //, zIndex: 10
-              })
-            })
-          ];
-        }
+        style: fwd2Style
       }),
       FAIRWAYDIMENSIONSLOS3: new VectorLayer({
         label: "LOS 3 Fairway Dimensions",
         visible: true,
         source: new VectorSource(),
-        style: function() {
-          return [
-            new Style({
-              stroke: new Stroke({
-                color: "rgba(0, 0, 255, 1.0)",
-                width: 2
-              }),
-              fill: new Fill({
-                color: "rgba(255, 255, 255, 0.4)"
-              })
-            }),
-            new Style({
-              text: new Text({
-                font: 'bold 12px "Open Sans", "sans-serif"',
-                placement: "line",
-                fill: new Fill({
-                  color: "black"
-                }),
-                text: "LOS: 3"
-                //, zIndex: 10
-              })
-            })
-          ];
-        }
+        style: fwd3Style
       }),
       WATERWAYAXIS: new VectorLayer({
         label: "Waterway Axis",
@@ -251,17 +354,7 @@
         source: new VectorSource({
           strategy: bboxStrategy
         }),
-        style: function() {
-          return new Style({
-            stroke: new Stroke({
-              color: "rgba(230, 230, 10, .8)",
-              width: 4
-            }),
-            fill: new Fill({
-              color: "rgba(230, 230, 10, .3)"
-            })
-          });
-        }
+        style: bottleneckStyle
       }),
       BOTTLENECKISOLINE: new TileLayer({
         label: "Bottleneck isolines",
@@ -320,33 +413,7 @@
         source: new VectorSource({
           strategy: bboxStrategy
         }),
-        style: function(feature, resolution, isLegend) {
-          let styles = [];
-          if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
-            let bnCenter = getCenter(feature.getGeometry().getExtent());
-            styles.push(
-              new Style({
-                geometry: new Point(bnCenter),
-                image: new Icon({
-                  src: require("@/assets/marker-bottleneck-critical.png"),
-                  anchor: [0.5, 0.5],
-                  scale: isLegend ? 0.5 : 1
-                })
-              })
-            );
-          }
-          if (feature.get("fa_critical") && !isLegend) {
-            styles.push(
-              new Style({
-                stroke: new Stroke({
-                  color: "rgba(255, 0, 0, 1)",
-                  width: 4
-                })
-              })
-            );
-          }
-          return styles;
-        }
+        style: bottleneckStatusStyle
       }),
       DISTANCEMARKS: new VectorLayer({
         label: "Distance marks",
@@ -363,32 +430,7 @@
         source: new VectorSource({
           strategy: bboxStrategy
         }),
-        style: function(feature, resolution) {
-          if (resolution < 10) {
-            var s = new Style({
-              image: new Circle({
-                radius: 5,
-                fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }),
-                stroke: new Stroke({ color: "blue", width: 1 })
-              })
-            });
-            if (resolution < 6) {
-              s.setText(
-                new Text({
-                  offsetY: 12,
-                  font: '10px "Open Sans", "sans-serif"',
-                  fill: new Fill({
-                    color: "black"
-                  }),
-                  text: (feature.get("hectometre") / 10).toString()
-                })
-              );
-            }
-            return s;
-          } else {
-            return [];
-          }
-        }
+        style: dmaStyle
       }),
       GAUGES: new VectorLayer({
         label: "Gauges",
@@ -397,36 +439,7 @@
         source: new VectorSource({
           strategy: bboxStrategy
         }),
-        style: function(feature, resolution, isLegend) {
-          return [
-            new Style({
-              image: new Icon({
-                src: require("@/assets/marker-gauge.png"),
-                anchor: [0.5, isLegend ? 0.5 : 1],
-                scale: isLegend ? 0.5 : 1
-              }),
-              text: new Text({
-                font: '10px "Open Sans", "sans-serif"',
-                offsetY: 8,
-                fill: new Fill({
-                  color: "white"
-                }),
-                text: feature.get("objname")
-              })
-            }),
-            new Style({
-              text: new Text({
-                font: '10px "Open Sans", "sans-serif"',
-                offsetY: 7,
-                offsetX: -1,
-                fill: new Fill({
-                  color: "black"
-                }),
-                text: feature.get("objname")
-              })
-            })
-          ];
-        },
+        style: gaugeStyle,
         maxResolution: 100,
         minResolution: 0
       }),