Mercurial > gemma
view client/src/components/map/styles.js @ 3011:fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 11 Apr 2019 12:14:01 +0200 |
parents | |
children | 80037790032d |
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)" }) }), 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; }, 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; }, 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") }) }) ]; } };