Mercurial > gemma
changeset 2482:ae1987c5beb3 critical-bottlenecks
client: display bottleneck status in separate layer
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 01 Mar 2019 14:55:58 +0100 |
parents | 0c9121abf120 |
children | 7247eb03e7c0 |
files | client/src/components/Maplayer.vue client/src/store/map.js |
diffstat | 2 files changed, 66 insertions(+), 15 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Maplayer.vue Fri Mar 01 13:51:09 2019 +0100 +++ b/client/src/components/Maplayer.vue Fri Mar 01 14:55:58 2019 +0100 @@ -352,6 +352,20 @@ ); layer.data.setVisible(layer.isVisible); + layer = this.getLayerByName(LAYERS.BOTTLENECKSTATUS); + layer.data.getSource().setLoader( + this.buildVectorLoader( + { + featureNS: "gemma", + featurePrefix: "gemma", + featureTypes: ["bottlenecks_geoserver"], + geometryName: "area" + }, + "/internal/wfs", + layer.data.getSource() + ) + ); + layer = this.getLayerByName(LAYERS.BOTTLENECKS); layer.data.getSource().setLoader( this.buildVectorLoader( @@ -370,22 +384,27 @@ headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) .then(response => { - this.btlnStrokeC = response.data.code; + let btlnStrokeC = response.data.code; HTTP.get("/system/style/Bottlenecks/fill", { headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) .then(response => { - this.btlnFillC = response.data.code; - var newstyle = new Style({ + let btlnFillC = response.data.code; + var newStyle = new Style({ stroke: new Stroke({ - color: this.btlnStrokeC, + color: btlnStrokeC, width: 4 }), fill: new Fill({ - color: this.btlnFillC + color: btlnFillC }) }); - layer.data.setStyle(newstyle); + layer.data.setStyle(function(feature, resolution) { + if (resolution <= 50) { + return newStyle; + } + return null; + }); }) .catch(error => { console.log(error);
--- a/client/src/store/map.js Fri Mar 01 13:51:09 2019 +0100 +++ b/client/src/store/map.js Fri Mar 01 14:55:58 2019 +0100 @@ -44,6 +44,7 @@ WATERWAYAXIS: "Waterway Axis", WATERWAYPROFILES: "Waterway Profiles", BOTTLENECKS: "Bottlenecks", + BOTTLENECKSTATUS: "Bottleneck Status", BOTTLENECKISOLINE: "Bottleneck isolines", DISTANCEMARKS: "Distance marks", DISTANCEMARKSAXIS: "Distance marks, Axis", @@ -279,15 +280,17 @@ source: new VectorSource({ strategy: bboxStrategy }), - style: new Style({ - stroke: new Stroke({ - color: "rgba(230, 230, 10, .8)", - width: 4 - }), - fill: new Fill({ - color: "rgba(230, 230, 10, .3)" - }) - }) + 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)" + }) + }); + } }), isVisible: true, showInLegend: true @@ -321,6 +324,35 @@ showInLegend: true }, { + name: LAYERS.BOTTLENECKSTATUS, + forLegendStyle: { point: true, resolution: 51 }, + data: new VectorLayer({ + source: new VectorSource({ + strategy: bboxStrategy + }), + style: function(feature, resolution) { + if (resolution > 50) { + let bnCenter = getCenter(feature.getGeometry().getExtent()); + let fillColor = feature.get("fa_critical") + ? "rgba(255, 0, 0, 0.5)" + : "rgba(0, 255, 0, 0.5)"; + let strokeColor = feature.get("fa_critical") ? "red" : "green"; + return new Style({ + geometry: new Point(bnCenter), + image: new Circle({ + radius: 10, + fill: new Fill({ color: fillColor }), + stroke: new Stroke({ color: strokeColor, width: 2 }) + }) + }); + } + return []; + } + }), + isVisible: true, + showInLegend: true + }, + { name: LAYERS.DISTANCEMARKS, forLegendStyle: { point: true, resolution: 8 }, data: new VectorLayer({