Mercurial > gemma
changeset 3448:d0278e7399fb
client: data accuracy: use single color for bottlenecks in diagram.
author | Raimund Renkert <raimund.renkert@intevation.de> |
---|---|
date | Fri, 24 May 2019 12:36:54 +0200 |
parents | 3bb2d14abf8a |
children | 654f5e2d94cf |
files | client/src/components/map/styles.js |
diffstat | 1 files changed, 22 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/styles.js Fri May 24 12:15:39 2019 +0200 +++ b/client/src/components/map/styles.js Fri May 24 12:36:54 2019 +0200 @@ -248,6 +248,7 @@ } else { // TODO: Get information from feature and check the ranges according to #423, #424, #425 let colorWaterlevel = "white"; + let colorBottleneck = "lime"; let colorComparison = "lime"; let colorAccuracy = "white"; let fa3d = feature.get("forecast_accuracy_3d"); @@ -261,11 +262,6 @@ colorAccuracy = "lime"; } } - 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 accuracy = `<polyline points="24,16 32,32 16,32 24,16" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`; - let comparison = `<polyline points="8,16 16,32 0,32 8,16" stroke='grey' stroke-width='1' fill='${colorComparison}'/>`; - 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)) { @@ -277,11 +273,30 @@ feature.getId().indexOf("gauges") > -1) || (m.getLayer("STRETCHES").getVisible() && feature.getId().indexOf("stretches") > -1) || - (m.getLayer("BOTTLENECKS").getVisible() && - feature.getId().indexOf("bottlenecks") > -1) || (m.getLayer("SECTIONS").getVisible() && feature.getId().indexOf("sections") > -1) ) { + 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 accuracy = `<polyline points="24,16 32,32 16,32 24,16" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`; + let comparison = `<polyline points="8,16 16,32 0,32 8,16" stroke='grey' stroke-width='1' fill='${colorComparison}'/>`; + 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>`; + s.push( + new Style({ + geometry: geom, + image: new Icon({ + src: svg, + anchor: [-0.5, 1] + }) + }) + ); + } + if ( + m.getLayer("BOTTLENECKS").getVisible() && + feature.getId().indexOf("bottlenecks") > -1 + ) { + let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='${colorBottleneck}'/>`; + let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g>${frame}</g></svg>`; s.push( new Style({ geometry: geom,