Mercurial > gemma
view 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 source
import { Icon, Stroke, Style, Fill, Text, Circle } from "ol/style"; import Point from "ol/geom/Point"; import { getCenter } from "ol/extent"; import store from "@/store/index"; import classifications from "../../lib/classifications"; const styles = { blue1: new Style({ stroke: new Stroke({ color: "rgba(0, 0, 255, 0.8)", lineDash: [2, 4], lineCap: "round", width: 2 }), fill: new Fill({ color: "rgba(240, 230, 0, 0.2)" }) }), blue2: new Style({ stroke: new Stroke({ color: "rgba(0, 0, 255, 0.9)", lineDash: [3, 6], lineCap: "round", width: 2 }), fill: new Fill({ color: "rgba(240, 230, 0, 0.1)" }) }), blue3: new Style({ stroke: new Stroke({ color: "rgba(0, 0, 255, 1.0)", width: 2 }), fill: new Fill({ color: "rgba(255, 255, 255, 0.4)" }) }), yellow1: new Style({ stroke: new Stroke({ color: "rgba(230, 230, 10, .8)", width: 4 }), fill: new Fill({ color: "rgba(230, 230, 10, .3)" }) }), yellow2: new Style({ stroke: new Stroke({ color: "rgba(250, 200, 0, .8)", width: 2 }), fill: new Fill({ color: "rgba(250, 200, 10, .3)" }) }), yellow3: new Style({ stroke: new Stroke({ color: "rgba(250, 240, 10, .9)", width: 5 }), fill: new Fill({ color: "rgba(250, 240, 0, .7)" }) }), orange1: new Style({ stroke: new Stroke({ color: "rgba(255, 150, 10, .8)", width: 2 }), fill: new Fill({ color: "rgba(255, 150, 0, .3)" }) }), orange2: new Style({ stroke: new Stroke({ color: "rgba(255, 166, 10, .9)", width: 5 }), fill: new Fill({ color: "rgba(255, 166, 0, .7)" }) }), red1: new Style({ stroke: new Stroke({ color: "rgba(255, 0, 0, 1)", width: 4 }) }), circleBlue: new Style({ image: new Circle({ radius: 5, fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }), stroke: new Stroke({ color: "blue", width: 1 }) }) }), textFW1: new Style({ text: new Text({ font: 'bold 12px "Open Sans", "sans-serif"', placement: "line", fill: new Fill({ color: "black" }), text: "LOS: 1" //, zIndex: 10 }) }), textFW2: new Style({ text: new Text({ font: 'bold 12px "Open Sans", "sans-serif"', placement: "line", fill: new Fill({ color: "black" }), text: "LOS: 2" //, zIndex: 10 }) }), textFW3: new Style({ text: new Text({ font: 'bold 12px "Open Sans", "sans-serif"', placement: "line", fill: new Fill({ color: "black" }), text: "LOS: 3" //, zIndex: 10 }) }) }; 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") && 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] }) }) ); } 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 map = store.getters["map/openLayersMap"](mapId); let geom = feature.getGeometry(); if (!(geom instanceof Point)) { geom = new Point(getCenter(feature.getGeometry().getExtent())); } if ( (map.getLayer("BOTTLENECKS").getVisible() && feature.getId().indexOf("bottlenecks") > -1) || (map.getLayer("SECTIONS").getVisible() && feature.getId().indexOf("sections") > -1) || (map.getLayer("STRETCHES").getVisible() && feature.getId().indexOf("stretches") > -1) || (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'/>`; 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 ( map.getLayer("BOTTLENECKS").getVisible() && feature.getId().indexOf("bottlenecks") > -1 ) { 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( new Style({ geometry: geom, image: new Icon({ src: svg, anchor: [0.5, 1] }) }) ); } } 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" }), backgroundFill: new Fill({ color: "rgba(255, 255, 255, 0.7)" }), padding: [2, 2, 2, 2], text }) }) ]; } }; }