Mercurial > gemma
changeset 3516:6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 29 May 2019 10:37:01 +0200 |
parents | 4d7b481e1d39 |
children | d3ca26b1d104 4cd4375efd5d 9538a0aeacde |
files | client/src/components/map/styles.js |
diffstat | 1 files changed, 24 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/styles.js Tue May 28 17:12:02 2019 +0200 +++ b/client/src/components/map/styles.js Wed May 29 10:37:01 2019 +0200 @@ -247,20 +247,31 @@ geom = new Point(getCenter(feature.getGeometry().getExtent())); } maps.forEach(m => { - 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) || + (m.getLayer("SECTIONS").getVisible() && + feature.getId().indexOf("sections") > -1) || + (m.getLayer("STRETCHES").getVisible() && + feature.getId().indexOf("stretches") > -1) || + (m.getLayer("GAUGES").getVisible() && + feature.getId().indexOf("gauges") > -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() &&