Mercurial > gemma
view client/src/components/map/styles.js @ 3335:59db0b5921c5
client: added layer for fairway availability diagrams with demo diagrams
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 20 May 2019 17:34:43 +0200 |
parents | 00548f0e81c3 |
children | 8c435f9a85bb |
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"; 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 { 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")) { let frame = `<rect x='0' y='0' width='40' height='104' stroke-width='0' fill='white'/>`; let lnwl = `<rect x='2' y='22' width='18' height='80' stroke-width='0' fill='aqua'/>`; let range1 = `<rect x='20' y='2' width='18' height='10' stroke-width='0' fill='hotpink'/>`; let range2 = `<rect x='20' y='12' width='18' height='30' stroke-width='0' fill='darksalmon'/>`; let range3 = `<rect x='20' y='42' width='18' height='60' stroke-width='0' fill='blue'/>`; let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='104'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`; s.push( new Style({ geometry: new Point([ feature.getGeometry().getExtent()[0], feature.getGeometry().getExtent()[1] + (feature.getGeometry().getExtent()[3] - feature.getGeometry().getExtent()[1]) ]), image: new Icon({ src: svg, anchor: [1, 1], scale: resolution > 50 ? 0.75 : 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) { return [ new Style({ image: new Icon({ src: require("@/assets/marker-gauge.png"), anchor: [0.5, isLegend ? 0.5 : 1], scale: isLegend ? 0.5 : 1 }), text: new Text({ font: '10px "Open Sans", "sans-serif"', offsetY: 8, fill: new Fill({ color: "white" }), text: feature.get("objname") }) }), new Style({ text: new Text({ font: '10px "Open Sans", "sans-serif"', offsetY: 7, offsetX: -1, fill: new Fill({ color: "black" }), text: feature.get("objname") }) }) ]; } };