# HG changeset patch # User Markus Kottlaender # Date 1559299530 -7200 # Node ID f3102fa16a69ec86694519ee6fecb82f4d72f220 # Parent 47c61ea894b183108cb3631e3eb953ff2f070762 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. diff -r 47c61ea894b1 -r f3102fa16a69 client/src/components/map/Map.vue --- a/client/src/components/map/Map.vue Fri May 31 12:20:08 2019 +0200 +++ b/client/src/components/map/Map.vue Fri May 31 12:45:30 2019 +0200 @@ -63,7 +63,7 @@ ...mapState("application", ["paneSetup", "paneRotate"]), ...mapState("imports", ["selectedStretchId", "selectedSectionId"]), layers() { - return layers(); + return layers(this.paneId); }, hasActiveInteractions() { return ( diff -r 47c61ea894b1 -r f3102fa16a69 client/src/components/map/layers.js --- a/client/src/components/map/layers.js Fri May 31 12:20:08 2019 +0200 +++ b/client/src/components/map/layers.js Fri May 31 12:45:30 2019 +0200 @@ -13,7 +13,7 @@ import OSM from "ol/source/OSM"; import { equalTo } from "ol/format/filter"; import { HTTP } from "@/lib/http"; -import styles from "./styles"; +import styleFactory from "./styles"; import store from "@/store/index"; const buildVectorLoader = ( @@ -162,7 +162,8 @@ } }); -export default function() { +export default function(mapId) { + const styles = styleFactory(mapId); // Shared feature source for layers: // BOTTLENECKS, BOTTLENECKSTATUS and BOTTLENECKFAIRWAYAVAILABILITY // Reduces bottlenecks_geoserver requests and number of stored feature objects. diff -r 47c61ea894b1 -r f3102fa16a69 client/src/components/map/styles.js --- 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 = ``; - let lnwl = ``; - let range1 = ``; - let range2 = ``; - let range3 = ``; - let svg = `data:image/svg+xml,${frame}${lnwl}${range1}${range2}${range3}`; - 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 = ``; + let lnwl = ``; + let range1 = ``; + let range2 = ``; + let range3 = ``; + let svg = `data:image/svg+xml,${frame}${lnwl}${range1}${range2}${range3}`; + 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 = ``; @@ -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 - }) - }) - ]; - } -}; + }; +}