Mercurial > gemma
changeset 2996:888a3454c3ae
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 }),