Mercurial > gemma
diff client/src/components/map/styles.js @ 3548:f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
This layer displays features based on which other layers are visible. To detect those other layers visibility realiably, the layer
needs to be aware about the map it belongs to.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 31 May 2019 12:45:30 +0200 |
parents | 6cdfc05fd6b0 |
children | 9e296d686f16 |
line wrap: on
line diff
--- a/client/src/components/map/styles.js Fri May 31 12:20:08 2019 +0200 +++ b/client/src/components/map/styles.js Fri May 31 12:45:30 2019 +0200 @@ -129,132 +129,132 @@ }) }; -export default { - stretches(feature) { - let style = styles.yellow2; - if (feature.get("highlighted")) { - style = styles.yellow3; - } - return style; - }, - sections(feature) { - let style = styles.orange1; - if (feature.get("highlighted")) { - style = styles.orange2; - } - return style; - }, - fwd1() { - return [styles.blue1, styles.textFW1]; - }, - fwd2() { - return [styles.blue2, styles.textFW2]; - }, - fwd3() { - return [styles.blue3, styles.textFW3]; - }, - bottleneck() { - return styles.yellow1; - }, - bottleneckStatus(feature, resolution, isLegend) { - let s = []; - if ((feature.get("fa_critical") && resolution > 15) || isLegend) { - let bnCenter = getCenter(feature.getGeometry().getExtent()); - s.push( - new Style({ - geometry: new Point(bnCenter), - image: new Icon({ - src: require("@/assets/marker-bottleneck-critical.png"), - anchor: [0.5, 0.5], - scale: isLegend ? 0.5 : 1 +export default function(mapId) { + return { + stretches(feature) { + let style = styles.yellow2; + if (feature.get("highlighted")) { + style = styles.yellow3; + } + return style; + }, + sections(feature) { + let style = styles.orange1; + if (feature.get("highlighted")) { + style = styles.orange2; + } + return style; + }, + fwd1() { + return [styles.blue1, styles.textFW1]; + }, + fwd2() { + return [styles.blue2, styles.textFW2]; + }, + fwd3() { + return [styles.blue3, styles.textFW3]; + }, + bottleneck() { + return styles.yellow1; + }, + bottleneckStatus(feature, resolution, isLegend) { + let s = []; + if ((feature.get("fa_critical") && resolution > 15) || isLegend) { + let bnCenter = getCenter(feature.getGeometry().getExtent()); + s.push( + new Style({ + geometry: new Point(bnCenter), + image: new Icon({ + src: require("@/assets/marker-bottleneck-critical.png"), + anchor: [0.5, 0.5], + scale: isLegend ? 0.5 : 1 + }) }) - }) - ); - } - if (feature.get("fa_critical") && !isLegend) { - s.push(styles.red1); - } - return s; - }, - bottleneckFairwayAvailability(feature, resolution, isLegend) { - let s = []; - if (isLegend) { - s.push( - new Style({ - image: new Icon({ - src: require("@/assets/fa-diagram.png"), - anchor: [0.5, 0.5], - scale: 1 + ); + } + if (feature.get("fa_critical") && !isLegend) { + s.push(styles.red1); + } + return s; + }, + bottleneckFairwayAvailability(feature, resolution, isLegend) { + let s = []; + if (isLegend) { + s.push( + new Style({ + image: new Icon({ + src: require("@/assets/fa-diagram.png"), + anchor: [0.5, 0.5], + scale: 1 + }) }) - }) - ); - } - if ( - feature.get("fa_critical") && - feature.get("fa_data") && - resolution > 15 - ) { - let data = feature.get("fa_data"); - let lnwlHeight = (80 / 100) * data.ldc; - let belowThresholdHeight = (80 / 100) * data.below; - let betweenThresholdHeight = (80 / 100) * data.between; - let aboveThresholdHeight = (80 / 100) * data.above; + ); + } + if ( + feature.get("fa_critical") && + feature.get("fa_data") && + resolution > 15 + ) { + let data = feature.get("fa_data"); + let lnwlHeight = (80 / 100) * data.ldc; + let belowThresholdHeight = (80 / 100) * data.below; + let betweenThresholdHeight = (80 / 100) * data.between; + let aboveThresholdHeight = (80 / 100) * data.above; - let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`; - let lnwl = `<rect x='2' y='${80 - - lnwlHeight + - 2}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`; - let range1 = `<rect x='12' y='2' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`; - let range2 = `<rect x='12' y='${belowThresholdHeight + - 2}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`; - let range3 = `<rect x='12' y='${80 - - aboveThresholdHeight + - 2}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`; - let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`; - let bnCenter = getCenter(feature.getGeometry().getExtent()); - s.push( - new Style({ - geometry: new Point(bnCenter), - image: new Icon({ - src: svg, - anchor: [1.2, 1.2] + let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`; + let lnwl = `<rect x='2' y='${80 - + lnwlHeight + + 2}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`; + let range1 = `<rect x='12' y='2' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`; + let range2 = `<rect x='12' y='${belowThresholdHeight + + 2}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`; + let range3 = `<rect x='12' y='${80 - + aboveThresholdHeight + + 2}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`; + let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`; + let bnCenter = getCenter(feature.getGeometry().getExtent()); + s.push( + new Style({ + geometry: new Point(bnCenter), + image: new Icon({ + src: svg, + anchor: [1.2, 1.2] + }) }) - }) - ); - } - 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 + ); + } + 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 = classifications.gmAvailability(feature); - let colorComparison = classifications.forecastVsReality(feature); - let colorAccuracy = classifications.forecastAccuracy(feature); - let maps = store.state.map.openLayersMaps; - let geom = feature.getGeometry(); - if (!(geom instanceof Point)) { - geom = new Point(getCenter(feature.getGeometry().getExtent())); - } - maps.forEach(m => { + ); + } else { + // TODO: Get information from feature and check the ranges according to #423, #424, #425 + let colorWaterlevel = classifications.gmAvailability(feature); + let colorComparison = classifications.forecastVsReality(feature); + let colorAccuracy = classifications.forecastAccuracy(feature); + let map = store.getters["map/openLayersMap"](mapId); + let geom = feature.getGeometry(); + if (!(geom instanceof Point)) { + geom = new Point(getCenter(feature.getGeometry().getExtent())); + } if ( - (m.getLayer("BOTTLENECKS").getVisible() && + (map.getLayer("BOTTLENECKS").getVisible() && feature.getId().indexOf("bottlenecks") > -1) || - (m.getLayer("SECTIONS").getVisible() && + (map.getLayer("SECTIONS").getVisible() && feature.getId().indexOf("sections") > -1) || - (m.getLayer("STRETCHES").getVisible() && + (map.getLayer("STRETCHES").getVisible() && feature.getId().indexOf("stretches") > -1) || - (m.getLayer("GAUGES").getVisible() && + (map.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'/>`; @@ -274,7 +274,7 @@ } if ( - m.getLayer("BOTTLENECKS").getVisible() && + map.getLayer("BOTTLENECKS").getVisible() && feature.getId().indexOf("bottlenecks") > -1 ) { let colorUniformTriangle = classifications.surveyCurrency(feature); @@ -290,62 +290,62 @@ }) ); } - }); - } - return s; - }, - dma(feature, resolution) { - if (resolution < 10) { - var s = styles.circleBlue; - if (resolution < 6) { - s.setText( - new Text({ - offsetY: 12, + } + return s; + }, + dma(feature, resolution) { + if (resolution < 10) { + var s = styles.circleBlue; + if (resolution < 6) { + s.setText( + new Text({ + offsetY: 12, + font: '10px "Open Sans", "sans-serif"', + fill: new Fill({ + color: "black" + }), + text: (feature.get("hectometre") / 10).toString() + }) + ); + } + return s; + } + return []; + }, + gauge(feature, resolution, isLegend) { + let waterlevel = feature.get("gm_waterlevel"); + let text = feature.get("objname"); + let iconColor = "white"; + if (waterlevel) { + text += "\n(" + waterlevel + " cm)"; + let refWaterlevels = JSON.parse(feature.get("reference_water_levels")); + if (waterlevel < refWaterlevels.LDC) iconColor = "brown"; + if (waterlevel > refWaterlevels.LDC && waterlevel < refWaterlevels.HDC) + iconColor = "blue"; + if (waterlevel > refWaterlevels.HDC) iconColor = "red"; + } + + return [ + new Style({ + image: new Icon({ + src: require("@/assets/marker-gauge-" + iconColor + ".png"), + anchor: [0.5, isLegend ? 0.5 : 1], + scale: isLegend ? 0.5 : 1 + }), + text: new Text({ font: '10px "Open Sans", "sans-serif"', + offsetY: 15, fill: new Fill({ color: "black" }), - text: (feature.get("hectometre") / 10).toString() + backgroundFill: new Fill({ + color: "rgba(255, 255, 255, 0.7)" + }), + padding: [2, 2, 2, 2], + text }) - ); - } - return s; - } - return []; - }, - gauge(feature, resolution, isLegend) { - let waterlevel = feature.get("gm_waterlevel"); - let text = feature.get("objname"); - let iconColor = "white"; - if (waterlevel) { - text += "\n(" + waterlevel + " cm)"; - let refWaterlevels = JSON.parse(feature.get("reference_water_levels")); - if (waterlevel < refWaterlevels.LDC) iconColor = "brown"; - if (waterlevel > refWaterlevels.LDC && waterlevel < refWaterlevels.HDC) - iconColor = "blue"; - if (waterlevel > refWaterlevels.HDC) iconColor = "red"; + }) + ]; } - - return [ - new Style({ - image: new Icon({ - src: require("@/assets/marker-gauge-" + iconColor + ".png"), - anchor: [0.5, isLegend ? 0.5 : 1], - scale: isLegend ? 0.5 : 1 - }), - text: new Text({ - font: '10px "Open Sans", "sans-serif"', - offsetY: 15, - fill: new Fill({ - color: "black" - }), - backgroundFill: new Fill({ - color: "rgba(255, 255, 255, 0.7)" - }), - padding: [2, 2, 2, 2], - text - }) - }) - ]; - } -}; + }; +}