Mercurial > gemma

comparison client/src/components/map/styles.js @ 3011:fc8fbea24568

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
3010:293bdd05ffcd 3011:fc8fbea24568
1 import { Icon, Stroke, Style, Fill, Text, Circle } from "ol/style";
2 import Point from "ol/geom/Point";
3 import { getCenter } from "ol/extent";
4
5 const styles = {
6 blue1: new Style({
7 stroke: new Stroke({
8 color: "rgba(0, 0, 255, 0.8)",
9 lineDash: [2, 4],
10 lineCap: "round",
11 width: 2
12 }),
13 fill: new Fill({
14 color: "rgba(240, 230, 0, 0.2)"
15 })
16 }),
17 blue2: new Style({
18 stroke: new Stroke({
19 color: "rgba(0, 0, 255, 0.9)",
20 lineDash: [3, 6],
21 lineCap: "round",
22 width: 2
23 }),
24 fill: new Fill({
25 color: "rgba(240, 230, 0, 0.1)"
26 })
27 }),
28 blue3: new Style({
29 stroke: new Stroke({
30 color: "rgba(0, 0, 255, 1.0)",
31 width: 2
32 }),
33 fill: new Fill({
34 color: "rgba(255, 255, 255, 0.4)"
35 })
36 }),
37 yellow1: new Style({
38 stroke: new Stroke({
39 color: "rgba(230, 230, 10, .8)",
40 width: 4
41 }),
42 fill: new Fill({
43 color: "rgba(230, 230, 10, .3)"
44 })
45 }),
46 yellow2: new Style({
47 stroke: new Stroke({
48 color: "rgba(250, 200, 0, .8)",
49 width: 2
50 }),
51 fill: new Fill({
52 color: "rgba(250, 200, 10, .3)"
53 })
54 }),
55 yellow3: new Style({
56 stroke: new Stroke({
57 color: "rgba(250, 240, 10, .9)",
58 width: 5
59 }),
60 fill: new Fill({
61 color: "rgba(250, 240, 0, .7)"
62 })
63 }),
64 red1: new Style({
65 stroke: new Stroke({
66 color: "rgba(255, 0, 0, 1)",
67 width: 4
68 })
69 }),
70 circleBlue: new Style({
71 image: new Circle({
72 radius: 5,
73 fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }),
74 stroke: new Stroke({ color: "blue", width: 1 })
75 })
76 }),
77 textFW1: new Style({
78 text: new Text({
79 font: 'bold 12px "Open Sans", "sans-serif"',
80 placement: "line",
81 fill: new Fill({
82 color: "black"
83 }),
84 text: "LOS: 1"
85 //, zIndex: 10
86 })
87 }),
88 textFW2: new Style({
89 text: new Text({
90 font: 'bold 12px "Open Sans", "sans-serif"',
91 placement: "line",
92 fill: new Fill({
93 color: "black"
94 }),
95 text: "LOS: 2"
96 //, zIndex: 10
97 })
98 }),
99 textFW3: new Style({
100 text: new Text({
101 font: 'bold 12px "Open Sans", "sans-serif"',
102 placement: "line",
103 fill: new Fill({
104 color: "black"
105 }),
106 text: "LOS: 3"
107 //, zIndex: 10
108 })
109 })
110 };
111
112 export default {
113 stretches(feature) {
114 let style = styles.yellow2;
115 if (feature.get("highlighted")) {
116 style = styles.yellow3;
117 }
118 return style;
119 },
120 fwd1() {
121 return [styles.blue1, styles.textFW1];
122 },
123 fwd2() {
124 return [styles.blue2, styles.textFW2];
125 },
126 fwd3() {
127 return [styles.blue3, styles.textFW3];
128 },
129 bottleneck() {
130 return styles.yellow1;
131 },
132 bottleneckStatus(feature, resolution, isLegend) {
133 let s = [];
134 if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
135 let bnCenter = getCenter(feature.getGeometry().getExtent());
136 s.push(
137 new Style({
138 geometry: new Point(bnCenter),
139 image: new Icon({
140 src: require("@/assets/marker-bottleneck-critical.png"),
141 anchor: [0.5, 0.5],
142 scale: isLegend ? 0.5 : 1
143 })
144 })
145 );
146 }
147 if (feature.get("fa_critical") && !isLegend) {
148 s.push(styles.red1);
149 }
150 return s;
151 },
152 dma(feature, resolution) {
153 if (resolution < 10) {
154 var s = styles.circleBlue;
155 if (resolution < 6) {
156 s.setText(
157 new Text({
158 offsetY: 12,
159 font: '10px "Open Sans", "sans-serif"',
160 fill: new Fill({
161 color: "black"
162 }),
163 text: (feature.get("hectometre") / 10).toString()
164 })
165 );
166 }
167 return s;
168 }
169 return [];
170 },
171 gauge(feature, resolution, isLegend) {
172 return [
173 new Style({
174 image: new Icon({
175 src: require("@/assets/marker-gauge.png"),
176 anchor: [0.5, isLegend ? 0.5 : 1],
177 scale: isLegend ? 0.5 : 1
178 }),
179 text: new Text({
180 font: '10px "Open Sans", "sans-serif"',
181 offsetY: 8,
182 fill: new Fill({
183 color: "white"
184 }),
185 text: feature.get("objname")
186 })
187 }),
188 new Style({
189 text: new Text({
190 font: '10px "Open Sans", "sans-serif"',
191 offsetY: 7,
192 offsetX: -1,
193 fill: new Fill({
194 color: "black"
195 }),
196 text: feature.get("objname")
197 })
198 })
199 ];
200 }
201 };