Mercurial > gemma
annotate client/src/components/layers/styles.js @ 5307:4ba3fda13c50 zpg-exception
Fixed typo in migration script.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Fri, 28 May 2021 11:17:12 +0200 |
parents | 96a544504818 |
children |
rev | line source |
---|---|
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 import { Icon, Stroke, Style, Fill, Text, Circle } from "ol/style"; |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
2 import Point from "ol/geom/Point"; |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 import { getCenter } from "ol/extent"; |
3434
9fba1be118e7
client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3433
diff
changeset
|
4 import store from "@/store/index"; |
3472
71022e6bd98e
client: Use classifications for bottleneck diagrams on map and extracted classification algos
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3457
diff
changeset
|
5 import classifications from "../../lib/classifications"; |
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
6 |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
7 const styles = { |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
8 blue1: new Style({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
9 stroke: new Stroke({ |
3571
9e296d686f16
client: cross profiles: support gabs in fairway and improved display in diagram and legend
Markus Kottlaender <markus@intevation.de>
parents:
3548
diff
changeset
|
10 color: [0, 0, 255, 0.8], |
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
11 lineDash: [2, 4], |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
12 lineCap: "round", |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
13 width: 2 |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
14 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
15 fill: new Fill({ |
3571
9e296d686f16
client: cross profiles: support gabs in fairway and improved display in diagram and legend
Markus Kottlaender <markus@intevation.de>
parents:
3548
diff
changeset
|
16 color: [240, 230, 0, 0.2] |
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
17 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
18 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 blue2: new Style({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 stroke: new Stroke({ |
3571
9e296d686f16
client: cross profiles: support gabs in fairway and improved display in diagram and legend
Markus Kottlaender <markus@intevation.de>
parents:
3548
diff
changeset
|
21 color: [0, 0, 255, 0.9], |
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 lineDash: [3, 6], |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 lineCap: "round", |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 width: 2 |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
25 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 fill: new Fill({ |
3571
9e296d686f16
client: cross profiles: support gabs in fairway and improved display in diagram and legend
Markus Kottlaender <markus@intevation.de>
parents:
3548
diff
changeset
|
27 color: [240, 230, 0, 0.1] |
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
28 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 blue3: new Style({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 stroke: new Stroke({ |
3571
9e296d686f16
client: cross profiles: support gabs in fairway and improved display in diagram and legend
Markus Kottlaender <markus@intevation.de>
parents:
3548
diff
changeset
|
32 color: [0, 0, 255, 1.0], |
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 width: 2 |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 fill: new Fill({ |
3571
9e296d686f16
client: cross profiles: support gabs in fairway and improved display in diagram and legend
Markus Kottlaender <markus@intevation.de>
parents:
3548
diff
changeset
|
36 color: [255, 255, 255, 0.4] |
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 yellow1: new Style({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 stroke: new Stroke({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 color: "rgba(230, 230, 10, .8)", |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 width: 4 |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 fill: new Fill({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 color: "rgba(230, 230, 10, .3)" |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 yellow2: new Style({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 stroke: new Stroke({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 color: "rgba(250, 200, 0, .8)", |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 width: 2 |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 fill: new Fill({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 color: "rgba(250, 200, 10, .3)" |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 yellow3: new Style({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 stroke: new Stroke({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 color: "rgba(250, 240, 10, .9)", |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 width: 5 |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 fill: new Fill({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 color: "rgba(250, 240, 0, .7)" |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 }), |
3309
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
66 orange1: new Style({ |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
67 stroke: new Stroke({ |
3312
00548f0e81c3
client: sections layer: adjusted colors
Markus Kottlaender <markus@intevation.de>
parents:
3309
diff
changeset
|
68 color: "rgba(255, 150, 10, .8)", |
3309
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
69 width: 2 |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
70 }), |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
71 fill: new Fill({ |
3312
00548f0e81c3
client: sections layer: adjusted colors
Markus Kottlaender <markus@intevation.de>
parents:
3309
diff
changeset
|
72 color: "rgba(255, 150, 0, .3)" |
3309
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
73 }) |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
74 }), |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
75 orange2: new Style({ |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
76 stroke: new Stroke({ |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
77 color: "rgba(255, 166, 10, .9)", |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
78 width: 5 |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
79 }), |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
80 fill: new Fill({ |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
81 color: "rgba(255, 166, 0, .7)" |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
82 }) |
80037790032d
client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents:
3011
diff
changeset
|
83 }), |
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 red1: new Style({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 stroke: new Stroke({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 color: "rgba(255, 0, 0, 1)", |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 width: 4 |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 circleBlue: new Style({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 image: new Circle({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 radius: 5, |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
94 stroke: new Stroke({ color: "blue", width: 1 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
95 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
96 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
97 textFW1: new Style({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
98 text: new Text({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
99 font: 'bold 12px "Open Sans", "sans-serif"', |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
100 placement: "line", |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
101 fill: new Fill({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 color: "black" |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 text: "LOS: 1" |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 //, zIndex: 10 |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 textFW2: new Style({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 text: new Text({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 font: 'bold 12px "Open Sans", "sans-serif"', |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 placement: "line", |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 fill: new Fill({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 color: "black" |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
114 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 text: "LOS: 2" |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 //, zIndex: 10 |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
119 textFW3: new Style({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
120 text: new Text({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
121 font: 'bold 12px "Open Sans", "sans-serif"', |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 placement: "line", |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 fill: new Fill({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 color: "black" |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 }), |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
126 text: "LOS: 3" |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
127 //, zIndex: 10 |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
129 }) |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
130 }; |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
131 |
4241
27434b0d4d96
Map: setting styles correctly for fairwaydimensions
Thomas Junk <thomas.junk@intevation.de>
parents:
4233
diff
changeset
|
132 const styleFactory = function(mapId) { |
4267
c5642480eb9b
styles: rename 'currency' to recency
Thomas Junk <thomas.junk@intevation.de>
parents:
4266
diff
changeset
|
133 const recencyColorCodes = { |
4266
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
134 OK: "lime", |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
135 WARNING: "yellow", |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
136 DANGER: "red", |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
137 NEUTRAL: "white" |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
138 }; |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
139 const gmAvailabilityColorCodes = { |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
140 OK: "lime", |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
141 WARNING: "yellow", |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
142 DANGER: "red", |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
143 NEUTRAL: "white" |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
144 }; |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
145 const forecastAccuracyColorCodes = { |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
146 OK: "lime", |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
147 WARNING: "yellow", |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
148 DANGER: "red", |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
149 NEUTRAL: "white" |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
150 }; |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
151 |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
152 const forecastVsRealityColorCodes = { |
4265
2596a028dc3a
Feature_info: display partial legend information for bottlenecks
Thomas Junk <thomas.junk@intevation.de>
parents:
4241
diff
changeset
|
153 OK: "lime", |
2596a028dc3a
Feature_info: display partial legend information for bottlenecks
Thomas Junk <thomas.junk@intevation.de>
parents:
4241
diff
changeset
|
154 WARNING: "yellow", |
2596a028dc3a
Feature_info: display partial legend information for bottlenecks
Thomas Junk <thomas.junk@intevation.de>
parents:
4241
diff
changeset
|
155 DANGER: "red", |
2596a028dc3a
Feature_info: display partial legend information for bottlenecks
Thomas Junk <thomas.junk@intevation.de>
parents:
4241
diff
changeset
|
156 NEUTRAL: "white" |
2596a028dc3a
Feature_info: display partial legend information for bottlenecks
Thomas Junk <thomas.junk@intevation.de>
parents:
4241
diff
changeset
|
157 }; |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
158 return { |
4267
c5642480eb9b
styles: rename 'currency' to recency
Thomas Junk <thomas.junk@intevation.de>
parents:
4266
diff
changeset
|
159 recencyColorCodes: recencyColorCodes, |
4266
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
160 gmAvailabilityColorCodes: gmAvailabilityColorCodes, |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
161 forecastAccuracyColorCodes: forecastAccuracyColorCodes, |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
162 forecastVsRealityColorCodes: forecastVsRealityColorCodes, |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
163 stretches(feature) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
164 let style = styles.yellow2; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
165 if (feature.get("highlighted")) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
166 style = styles.yellow3; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
167 } |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
168 return style; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
169 }, |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
170 sections(feature) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
171 let style = styles.orange1; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
172 if (feature.get("highlighted")) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
173 style = styles.orange2; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
174 } |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
175 return style; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
176 }, |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
177 fwd1() { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
178 return [styles.blue1, styles.textFW1]; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
179 }, |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
180 fwd2() { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
181 return [styles.blue2, styles.textFW2]; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
182 }, |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
183 fwd3() { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
184 return [styles.blue3, styles.textFW3]; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
185 }, |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
186 bottleneck() { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
187 return styles.yellow1; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
188 }, |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
189 bottleneckStatus(feature, resolution, isLegend) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
190 let s = []; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
191 if ((feature.get("fa_critical") && resolution > 15) || isLegend) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
192 let bnCenter = getCenter(feature.getGeometry().getExtent()); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
193 s.push( |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
194 new Style({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
195 geometry: new Point(bnCenter), |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
196 image: new Icon({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
197 src: require("@/assets/marker-bottleneck-critical.png"), |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
198 anchor: [0.5, 0.5], |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
199 scale: isLegend ? 0.5 : 1 |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
200 }) |
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
201 }) |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
202 ); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
203 } |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
204 if (feature.get("fa_critical") && !isLegend) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
205 s.push(styles.red1); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
206 } |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
207 return s; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
208 }, |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
209 bottleneckFairwayAvailability(feature, resolution, isLegend) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
210 let s = []; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
211 if (isLegend) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
212 s.push( |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
213 new Style({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
214 image: new Icon({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
215 src: require("@/assets/fa-diagram.png"), |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
216 anchor: [0.5, 0.5], |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
217 scale: 1 |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
218 }) |
3335
59db0b5921c5
client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3312
diff
changeset
|
219 }) |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
220 ); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
221 } |
4222
c5cc6540940e
client: improve LOD for one layer
Bernhard Reiter <bernhard@intevation.de>
parents:
3843
diff
changeset
|
222 if (feature.get("fa_critical") && feature.get("fa_data")) { |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
223 let data = feature.get("fa_data"); |
4380
d9ce63cad8da
FA on map: paint a nice white border around the data
Thomas Junk <thomas.junk@intevation.de>
parents:
4319
diff
changeset
|
224 const heightInPixel = 80; |
4318
be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4279
diff
changeset
|
225 const relativeHeightInPercent = heightInPixel / 100; |
be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4279
diff
changeset
|
226 let lnwlHeight = relativeHeightInPercent * data.ldc; |
be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4279
diff
changeset
|
227 let belowThresholdHeight = relativeHeightInPercent * data.below; |
be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4279
diff
changeset
|
228 let betweenThresholdHeight = relativeHeightInPercent * data.between; |
be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4279
diff
changeset
|
229 let aboveThresholdHeight = relativeHeightInPercent * data.above; |
4380
d9ce63cad8da
FA on map: paint a nice white border around the data
Thomas Junk <thomas.junk@intevation.de>
parents:
4319
diff
changeset
|
230 let lnwl = `<rect x='2' y='${2 + |
d9ce63cad8da
FA on map: paint a nice white border around the data
Thomas Junk <thomas.junk@intevation.de>
parents:
4319
diff
changeset
|
231 heightInPixel - |
4319
0d516bac1aae
bottleneck fairway availability: minor layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
4318
diff
changeset
|
232 lnwlHeight}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`; |
4380
d9ce63cad8da
FA on map: paint a nice white border around the data
Thomas Junk <thomas.junk@intevation.de>
parents:
4319
diff
changeset
|
233 let above = `<rect x='12' y='${2 + |
d9ce63cad8da
FA on map: paint a nice white border around the data
Thomas Junk <thomas.junk@intevation.de>
parents:
4319
diff
changeset
|
234 heightInPixel - |
4319
0d516bac1aae
bottleneck fairway availability: minor layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
4318
diff
changeset
|
235 aboveThresholdHeight}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`; |
4380
d9ce63cad8da
FA on map: paint a nice white border around the data
Thomas Junk <thomas.junk@intevation.de>
parents:
4319
diff
changeset
|
236 let between = `<rect x='12' y='${2 + |
d9ce63cad8da
FA on map: paint a nice white border around the data
Thomas Junk <thomas.junk@intevation.de>
parents:
4319
diff
changeset
|
237 heightInPixel - |
4318
be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4279
diff
changeset
|
238 aboveThresholdHeight - |
be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4279
diff
changeset
|
239 betweenThresholdHeight}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`; |
4380
d9ce63cad8da
FA on map: paint a nice white border around the data
Thomas Junk <thomas.junk@intevation.de>
parents:
4319
diff
changeset
|
240 let below = `<rect x='12' y='${2 + |
d9ce63cad8da
FA on map: paint a nice white border around the data
Thomas Junk <thomas.junk@intevation.de>
parents:
4319
diff
changeset
|
241 heightInPixel - |
4318
be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4279
diff
changeset
|
242 aboveThresholdHeight - |
be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4279
diff
changeset
|
243 betweenThresholdHeight - |
be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4279
diff
changeset
|
244 belowThresholdHeight}' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`; |
be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4279
diff
changeset
|
245 let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`; |
be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4279
diff
changeset
|
246 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${above}${between}${below}</g></svg>`; |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
247 let bnCenter = getCenter(feature.getGeometry().getExtent()); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
248 s.push( |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
249 new Style({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
250 geometry: new Point(bnCenter), |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
251 image: new Icon({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
252 src: svg, |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
253 anchor: [1.2, 1.2] |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
254 }) |
3335
59db0b5921c5
client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3312
diff
changeset
|
255 }) |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
256 ); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
257 } |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
258 return s; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
259 }, |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
260 dataAvailability(feature, resolution, isLegend) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
261 let s = []; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
262 if (isLegend) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
263 s.push( |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
264 new Style({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
265 image: new Icon({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
266 src: require("@/assets/da-diagram.png"), |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
267 anchor: [0.5, 0.5], |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
268 scale: 1 |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
269 }) |
3434
9fba1be118e7
client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3433
diff
changeset
|
270 }) |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
271 ); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
272 } else { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
273 // TODO: Get information from feature and check the ranges according to #423, #424, #425 |
4266
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
274 let colorWaterlevel = |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
275 gmAvailabilityColorCodes[classifications.gmAvailability(feature)]; |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
276 let colorComparison = |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
277 forecastVsRealityColorCodes[ |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
278 classifications.forecastVsReality(feature) |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
279 ]; |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
280 let colorAccuracy = |
fbe2f1aa2757
styles: refactor color coding accuracy colors
Thomas Junk <thomas.junk@intevation.de>
parents:
4265
diff
changeset
|
281 forecastAccuracyColorCodes[classifications.forecastAccuracy(feature)]; |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
282 let map = store.getters["map/openLayersMap"](mapId); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
283 let geom = feature.getGeometry(); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
284 if (!(geom instanceof Point)) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
285 geom = new Point(getCenter(feature.getGeometry().getExtent())); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
286 } |
3516
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
287 if ( |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
288 (map.getLayer("BOTTLENECKS").getVisible() && |
3516
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
289 feature.getId().indexOf("bottlenecks") > -1) || |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
290 (map.getLayer("SECTIONS").getVisible() && |
3516
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
291 feature.getId().indexOf("sections") > -1) || |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
292 (map.getLayer("STRETCHES").getVisible() && |
3516
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
293 feature.getId().indexOf("stretches") > -1) || |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
294 (map.getLayer("GAUGES").getVisible() && |
3516
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
295 feature.getId().indexOf("gauges") > -1) |
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
296 ) { |
3843
cc585e068ca0
client: made triangles in data accuracy layer equilateral
Markus Kottlaender <markus@intevation.de>
parents:
3720
diff
changeset
|
297 let frame = `<polyline points='16,0 32,28 0,28 16,0' stroke='grey' stroke-width='1' fill='white'/>`; |
cc585e068ca0
client: made triangles in data accuracy layer equilateral
Markus Kottlaender <markus@intevation.de>
parents:
3720
diff
changeset
|
298 let waterlevel = `<polyline points="16,0 24,14 16,28 8,14 16,0" stroke='grey' stroke-width='1' fill='${colorWaterlevel}'/>`; |
cc585e068ca0
client: made triangles in data accuracy layer equilateral
Markus Kottlaender <markus@intevation.de>
parents:
3720
diff
changeset
|
299 let accuracy = `<polyline points="24,14 32,28 16,28 24,14" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`; |
cc585e068ca0
client: made triangles in data accuracy layer equilateral
Markus Kottlaender <markus@intevation.de>
parents:
3720
diff
changeset
|
300 let comparison = `<polyline points="8,14 16,28 0,28 8,14" stroke='grey' stroke-width='1' fill='${colorComparison}'/>`; |
cc585e068ca0
client: made triangles in data accuracy layer equilateral
Markus Kottlaender <markus@intevation.de>
parents:
3720
diff
changeset
|
301 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='28'><g>${frame}${waterlevel}${comparison}${accuracy}</g></svg>`; |
3516
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
302 s.push( |
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
303 new Style({ |
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
304 geometry: geom, |
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
305 image: new Icon({ |
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
306 src: svg, |
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
307 anchor: [-0.5, 1] |
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
308 }) |
3448
d0278e7399fb
client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3444
diff
changeset
|
309 }) |
3516
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
310 ); |
6cdfc05fd6b0
client: data accuracy layer: show only diagrams for layers that are active
Markus Kottlaender <markus@intevation.de>
parents:
3507
diff
changeset
|
311 } |
3507
a606d003730c
client: spuc12: implemented diagram for reference gauge of bottlenecks
Markus Kottlaender <markus@intevation.de>
parents:
3501
diff
changeset
|
312 |
3448
d0278e7399fb
client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3444
diff
changeset
|
313 if ( |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
314 map.getLayer("BOTTLENECKS").getVisible() && |
3448
d0278e7399fb
client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3444
diff
changeset
|
315 feature.getId().indexOf("bottlenecks") > -1 |
d0278e7399fb
client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3444
diff
changeset
|
316 ) { |
4265
2596a028dc3a
Feature_info: display partial legend information for bottlenecks
Thomas Junk <thomas.junk@intevation.de>
parents:
4241
diff
changeset
|
317 let colorUniformTriangle = |
4279
30f26bf7ff24
Reordering of elements
Thomas Junk <thomas.junk@intevation.de>
parents:
4278
diff
changeset
|
318 recencyColorCodes[classifications.surveyRecency(feature)]; |
3843
cc585e068ca0
client: made triangles in data accuracy layer equilateral
Markus Kottlaender <markus@intevation.de>
parents:
3720
diff
changeset
|
319 let frame = `<polyline points='16,0 32,28 0,28 16,0' stroke='grey' stroke-width='1' fill='${colorUniformTriangle}'/>`; |
cc585e068ca0
client: made triangles in data accuracy layer equilateral
Markus Kottlaender <markus@intevation.de>
parents:
3720
diff
changeset
|
320 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='28'><g>${frame}</g></svg>`; |
3434
9fba1be118e7
client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3433
diff
changeset
|
321 s.push( |
9fba1be118e7
client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3433
diff
changeset
|
322 new Style({ |
9fba1be118e7
client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3433
diff
changeset
|
323 geometry: geom, |
9fba1be118e7
client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3433
diff
changeset
|
324 image: new Icon({ |
9fba1be118e7
client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3433
diff
changeset
|
325 src: svg, |
3507
a606d003730c
client: spuc12: implemented diagram for reference gauge of bottlenecks
Markus Kottlaender <markus@intevation.de>
parents:
3501
diff
changeset
|
326 anchor: [0.5, 1] |
3434
9fba1be118e7
client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3433
diff
changeset
|
327 }) |
9fba1be118e7
client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3433
diff
changeset
|
328 }) |
9fba1be118e7
client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3433
diff
changeset
|
329 ); |
9fba1be118e7
client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
3433
diff
changeset
|
330 } |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
331 } |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
332 return s; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
333 }, |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
334 dma(feature, resolution) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
335 if (resolution < 10) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
336 var s = styles.circleBlue; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
337 if (resolution < 6) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
338 s.setText( |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
339 new Text({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
340 offsetY: 12, |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
341 font: '10px "Open Sans", "sans-serif"', |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
342 fill: new Fill({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
343 color: "black" |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
344 }), |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
345 text: (feature.get("hectometre") / 10).toString() |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
346 }) |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
347 ); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
348 } |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
349 return s; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
350 } |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
351 return []; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
352 }, |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
353 gauge(feature, resolution, isLegend) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
354 let waterlevel = feature.get("gm_waterlevel"); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
355 let text = feature.get("objname"); |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
356 let iconColor = "white"; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
357 if (waterlevel) { |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
358 text += "\n(" + waterlevel + " cm)"; |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
359 let refWaterlevels = JSON.parse(feature.get("reference_water_levels")); |
3720
1525ead37a2e
client: gauges map layer: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3571
diff
changeset
|
360 if (refWaterlevels) { |
4278
1d4e588a61df
styles: only try to parse reflevels if any.
Thomas Junk <thomas.junk@intevation.de>
parents:
4267
diff
changeset
|
361 const HDC = |
1d4e588a61df
styles: only try to parse reflevels if any.
Thomas Junk <thomas.junk@intevation.de>
parents:
4267
diff
changeset
|
362 refWaterlevels[ |
1d4e588a61df
styles: only try to parse reflevels if any.
Thomas Junk <thomas.junk@intevation.de>
parents:
4267
diff
changeset
|
363 Object.keys(refWaterlevels).find(e => /HDC/.test(e)) |
1d4e588a61df
styles: only try to parse reflevels if any.
Thomas Junk <thomas.junk@intevation.de>
parents:
4267
diff
changeset
|
364 ]; |
1d4e588a61df
styles: only try to parse reflevels if any.
Thomas Junk <thomas.junk@intevation.de>
parents:
4267
diff
changeset
|
365 const LDC = |
1d4e588a61df
styles: only try to parse reflevels if any.
Thomas Junk <thomas.junk@intevation.de>
parents:
4267
diff
changeset
|
366 refWaterlevels[ |
1d4e588a61df
styles: only try to parse reflevels if any.
Thomas Junk <thomas.junk@intevation.de>
parents:
4267
diff
changeset
|
367 Object.keys(refWaterlevels).find(e => /LDC/.test(e)) |
1d4e588a61df
styles: only try to parse reflevels if any.
Thomas Junk <thomas.junk@intevation.de>
parents:
4267
diff
changeset
|
368 ]; |
4233
63b160379e06
gauge_style: allow different kinds of naming for HDC/LDC
Thomas Junk <thomas.junk@intevation.de>
parents:
4222
diff
changeset
|
369 if (waterlevel < LDC) iconColor = "brown"; |
63b160379e06
gauge_style: allow different kinds of naming for HDC/LDC
Thomas Junk <thomas.junk@intevation.de>
parents:
4222
diff
changeset
|
370 if (waterlevel > LDC && waterlevel < HDC) iconColor = "blue"; |
63b160379e06
gauge_style: allow different kinds of naming for HDC/LDC
Thomas Junk <thomas.junk@intevation.de>
parents:
4222
diff
changeset
|
371 if (waterlevel > HDC) iconColor = "red"; |
3720
1525ead37a2e
client: gauges map layer: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3571
diff
changeset
|
372 } |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
373 } |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
374 |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
375 return [ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
376 new Style({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
377 image: new Icon({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
378 src: require("@/assets/marker-gauge-" + iconColor + ".png"), |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
379 anchor: [0.5, isLegend ? 0.5 : 1], |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
380 scale: isLegend ? 0.5 : 1 |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
381 }), |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
382 text: new Text({ |
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
383 font: '10px "Open Sans", "sans-serif"', |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
384 offsetY: 15, |
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
385 fill: new Fill({ |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
386 color: "black" |
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
387 }), |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
388 backgroundFill: new Fill({ |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
389 color: "rgba(255, 255, 255, 0.7)" |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
390 }), |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
391 padding: [2, 2, 2, 2], |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
392 text |
3011
fc8fbea24568
client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
393 }) |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
394 }) |
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
395 ]; |
3364
b62b9d5ce06d
client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents:
3338
diff
changeset
|
396 } |
3548
f3102fa16a69
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps
Markus Kottlaender <markus@intevation.de>
parents:
3516
diff
changeset
|
397 }; |
4241
27434b0d4d96
Map: setting styles correctly for fairwaydimensions
Thomas Junk <thomas.junk@intevation.de>
parents:
4233
diff
changeset
|
398 }; |
27434b0d4d96
Map: setting styles correctly for fairwaydimensions
Thomas Junk <thomas.junk@intevation.de>
parents:
4233
diff
changeset
|
399 |
27434b0d4d96
Map: setting styles correctly for fairwaydimensions
Thomas Junk <thomas.junk@intevation.de>
parents:
4233
diff
changeset
|
400 export { styles, styleFactory }; |