Mercurial > gemma
changeset 3507:a606d003730c
client: spuc12: implemented diagram for reference gauge of bottlenecks
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Tue, 28 May 2019 14:52:57 +0200 |
| parents | e2ed741545e1 |
| children | 081182dfcc35 |
| files | client/src/components/map/layers.js client/src/components/map/styles.js client/src/lib/classifications.js |
| diffstat | 3 files changed, 47 insertions(+), 30 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/layers.js Tue May 28 13:47:18 2019 +0200 +++ b/client/src/components/map/layers.js Tue May 28 14:52:57 2019 +0200 @@ -52,7 +52,7 @@ JSON.stringify(response.data) ); if (featurePostProcessor) { - features.map(f => featurePostProcessor(f, store)); + features.map(f => featurePostProcessor(f, store, features)); } vectorSource.addFeatures(features); }) @@ -532,7 +532,23 @@ }, source, true, - async (f, store) => { + // since we don't use bbox strategy, features will contain all features and we can use it + // to find reference gauges for bottlenecks, yeah! + async (f, store, features) => { + // attach reference gauge to bottleneck + if (f.getId().indexOf("bottlenecks") > -1) { + f.set( + "gauge_obj", + features.find(feat => { + return ( + feat.getId().indexOf("gauges") > -1 && + feat.get("objname") === f.get("gauge_objname") + ); + }) + ); + } + + // attach nsc data to gauge if (f.getId().indexOf("gauges") > -1) { // look for nashSutcliffeOverview in store. If present and // not older than 15 min use it or fetch new data and store it.
--- a/client/src/components/map/styles.js Tue May 28 13:47:18 2019 +0200 +++ b/client/src/components/map/styles.js Tue May 28 14:52:57 2019 +0200 @@ -239,7 +239,6 @@ } else { // TODO: Get information from feature and check the ranges according to #423, #424, #425 let colorWaterlevel = classifications.gmAvailability(feature); - let colorUniformTriangle = "lime"; let colorComparison = classifications.forecastVsReality(feature); let colorAccuracy = classifications.forecastAccuracy(feature); let maps = store.state.map.openLayersMaps; @@ -248,34 +247,26 @@ 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("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] - }) + 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 ) { - colorUniformTriangle = classifications.surveyCurrency(feature); + let colorUniformTriangle = classifications.surveyCurrency(feature); let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='${colorUniformTriangle}'/>`; let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g>${frame}</g></svg>`; s.push( @@ -283,7 +274,7 @@ geometry: geom, image: new Icon({ src: svg, - anchor: [-0.5, 1] + anchor: [0.5, 1] }) }) );
--- a/client/src/lib/classifications.js Tue May 28 13:47:18 2019 +0200 +++ b/client/src/lib/classifications.js Tue May 28 14:52:57 2019 +0200 @@ -12,6 +12,13 @@ * Raimund Renkert <raimund.renkert@intevation.de> */ +const getGauge = f => { + if (f.getId().indexOf("bottlenecks") > -1) { + return f.get("gauge_obj"); + } + return f; +}; + export default { surveyCurrency(bottleneck) { if ( @@ -34,7 +41,8 @@ return "red"; } }, - gmAvailability(gauge) { + gmAvailability(feature) { + let gauge = getGauge(feature); let gmDate = gauge.get("gm_measuredate"); let gmN = gauge.get("gm_n_14d"); if ( @@ -52,7 +60,8 @@ } return "red"; }, - forecastAccuracy(gauge) { + forecastAccuracy(feature) { + let gauge = getGauge(feature); let fa3d = gauge.get("forecast_accuracy_3d"); let fa1d = gauge.get("forecast_accuracy_1d"); if (typeof fa3d == "number" && typeof fa1d == "number") { @@ -66,7 +75,8 @@ } return "white"; }, - forecastVsReality(gauge) { + forecastVsReality(feature) { + let gauge = getGauge(feature); let nsc = gauge.get("nsc_data"); if (nsc && nsc.coeffs.reduce((sum, coeff) => sum + coeff.samples, 0)) { // 24h < 12.5