Mercurial > gemma
changeset 3434:9fba1be118e7
client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
author | Raimund Renkert <raimund.renkert@intevation.de> |
---|---|
date | Fri, 24 May 2019 09:51:04 +0200 |
parents | e56b280582ae |
children | 157f77a67f6c |
files | client/src/components/layers/Layers.vue client/src/components/layers/Layerselect.vue client/src/components/map/layers.js client/src/components/map/styles.js |
diffstat | 4 files changed, 94 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/layers/Layers.vue Fri May 24 09:40:43 2019 +0200 +++ b/client/src/components/layers/Layers.vue Fri May 24 09:51:04 2019 +0200 @@ -33,6 +33,7 @@ <Layerselect layerId="DIFFERENCES" /> <Layerselect layerId="BOTTLENECKSTATUS" /> <Layerselect layerId="BOTTLENECKFAIRWAYAVAILABILITY" /> + <Layerselect layerId="DATAAVAILABILITY" /> <Layerselect layerId="DISTANCEMARKS" /> <Layerselect layerId="DISTANCEMARKSAXIS" /> <Layerselect layerId="GAUGES" />
--- a/client/src/components/layers/Layerselect.vue Fri May 24 09:40:43 2019 +0200 +++ b/client/src/components/layers/Layerselect.vue Fri May 24 09:51:04 2019 +0200 @@ -72,6 +72,13 @@ map .getLayer(this.layerId) .setVisible(!map.getLayer(this.layerId).getVisible()); + if ( + this.layerId === "GAUGES" || + this.layerId === "STRETCHES" || + this.layerId === "BOTTLENECKS" + ) { + map.getLayer("DATAAVAILABILITY").changed(); + } } else { this.openLayersMaps.forEach(m => { m.getLayer(this.layerId).setVisible(
--- a/client/src/components/map/layers.js Fri May 24 09:40:43 2019 +0200 +++ b/client/src/components/map/layers.js Fri May 24 09:51:04 2019 +0200 @@ -518,6 +518,30 @@ source }); })(), + (function() { + const source = new VectorSource({ strategy: bboxStrategy }); + source.setLoader( + buildVectorLoader( + { + featureTypes: ["bottlenecks_geoserver", "gauges_geoserver", "stretches_geoserver"], + }, + source, + true, + async (f, store) => { + return f + } + ) + ); + return new VectorLayer({ + id: "DATAAVAILABILITY", + label: "Data Availability/Accuracy", + forLegendStyle: { point: true, resolution: 16 }, + visible: false, + zIndex: 1, + style: styles.dataAvailability, + source + }); + })(), new ImageLayer({ id: "DISTANCEMARKS", label: "Distance Marks",
--- a/client/src/components/map/styles.js Fri May 24 09:40:43 2019 +0200 +++ b/client/src/components/map/styles.js Fri May 24 09:51:04 2019 +0200 @@ -1,6 +1,7 @@ import { Icon, Stroke, Style, Fill, Text, Circle } from "ol/style"; import Point from "ol/geom/Point"; import { getCenter } from "ol/extent"; +import store from "@/store/index"; const styles = { blue1: new Style({ @@ -232,6 +233,67 @@ } return s; }, + dataAvailability(feature, resolution, isLegend) { + let s = []; + if (isLegend) { + s.push( + new Style({ + image: new Icon({ + src: require("@/assets/da-diagram.png"), + anchor: [0.5, 0.5], + scale: 1 + }) + }) + ); + } else { + // TODO: Get information from feature and check the ranges according to #423, #424, #425 + let colorWaterlevel; + let colorComparison = "lime"; + let colorAccuracy = "yellow"; + let fa = feature.get("forecast_accuracy"); + let fa1d = feature.get("forecast_accuracy_1d"); + if (fa === null || fa === undefined) { + colorWaterlevel = "white"; + } else if (fa < 15 && fa1d < 15) { + colorWaterlevel = "lime"; + } else if (fa > 15 && fa1d < 15) { + colorWaterlevel = "yellow"; + } else if (fa1d > 15) { + colorWaterlevel = "red"; + } + let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='white'/>`; + let waterlevel = `<polyline points="16,0 24,16 16,32 8,16 16,0" stroke='grey' stroke-width='1' fill='${colorWaterlevel}'/>`; + let comparison = `<polyline points="24,16 32,32 16,32 24,16" stroke='grey' stroke-width='1' fill='${colorComparison}'/>`; + let accuracy = `<polyline points="8,16 16,32 0,32 8,16" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`; + let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g>${frame}${waterlevel}${comparison}${accuracy}</g></svg>`; + let maps = store.state.map.openLayersMaps; + let geom = feature.getGeometry(); + if (!(geom instanceof Point)) { + geom = new Point(getCenter(feature.getGeometry().getExtent())); + } + maps.forEach(m => { + if ( + (m.getLayer("GAUGES").getVisible() && + feature.getId().indexOf("gauges") > -1) || + (m.getLayer("STRETCHES").getVisible() && + feature.getId().indexOf("stretches") > -1) || + (m.getLayer("BOTTLENECKS").getVisible() && + feature.getId().indexOf("bottlenecks") > -1) + ) { + s.push( + new Style({ + geometry: geom, + image: new Icon({ + src: svg, + anchor: [-0.5, 1] + }) + }) + ); + } + }); + } + return s; + }, dma(feature, resolution) { if (resolution < 10) { var s = styles.circleBlue;