Mercurial > gemma

annotate client/src/components/map/styles.js @ 3443:2eeb5a69d5f2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Exchange comparison and accuracy triangles Since comparison references the past, it should be on the left, while accuracy references preditions and should be on the right.
author Tom Gottfried <tom@intevation.de>
date Fri, 24 May 2019 11:46:07 +0200
parents 030dc48382c9
children 1559566662f5
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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";
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 const styles = {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 blue1: new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 stroke: new Stroke({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 color: "rgba(0, 0, 255, 0.8)",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 lineDash: [2, 4],
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 lineCap: "round",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 width: 2
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 color: "rgba(240, 230, 0, 0.2)"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 })
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 blue2: new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 stroke: new Stroke({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 color: "rgba(0, 0, 255, 0.9)",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 lineDash: [3, 6],
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 lineCap: "round",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 width: 2
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 color: "rgba(240, 230, 0, 0.1)"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 })
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 blue3: new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 stroke: new Stroke({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 color: "rgba(0, 0, 255, 1.0)",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 width: 2
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 color: "rgba(255, 255, 255, 0.4)"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 })
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 yellow1: new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 stroke: new Stroke({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 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
41 width: 4
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 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
45 })
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 yellow2: new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 stroke: new Stroke({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 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
50 width: 2
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 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
54 })
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 yellow3: new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 stroke: new Stroke({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 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
59 width: 5
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 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
63 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 }),
3309
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
65 orange1: new Style({
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
66 stroke: new Stroke({
3312
00548f0e81c3 client: sections layer: adjusted colors
Markus Kottlaender <markus@intevation.de>
parents: 3309
diff changeset
67 color: "rgba(255, 150, 10, .8)",
3309
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
68 width: 2
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
69 }),
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
70 fill: new Fill({
3312
00548f0e81c3 client: sections layer: adjusted colors
Markus Kottlaender <markus@intevation.de>
parents: 3309
diff changeset
71 color: "rgba(255, 150, 0, .3)"
3309
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
72 })
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 orange2: new Style({
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
75 stroke: new Stroke({
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
76 color: "rgba(255, 166, 10, .9)",
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
77 width: 5
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
78 }),
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
79 fill: new Fill({
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
80 color: "rgba(255, 166, 0, .7)"
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
81 })
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
82 }),
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 red1: new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 stroke: new Stroke({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 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
86 width: 4
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 })
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 circleBlue: new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 image: new Circle({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 radius: 5,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 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
93 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
94 })
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 textFW1: new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 text: new Text({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 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
99 placement: "line",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 color: "black"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 text: "LOS: 1"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 //, zIndex: 10
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 })
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 textFW2: new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 text: new Text({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 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
110 placement: "line",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112 color: "black"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
113 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 text: "LOS: 2"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 //, zIndex: 10
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 })
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 textFW3: new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 text: new Text({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120 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
121 placement: "line",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 color: "black"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 text: "LOS: 3"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 //, zIndex: 10
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 })
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 export default {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
132 stretches(feature) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
133 let style = styles.yellow2;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 if (feature.get("highlighted")) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 style = styles.yellow3;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
137 return style;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 },
3309
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
139 sections(feature) {
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
140 let style = styles.orange1;
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
141 if (feature.get("highlighted")) {
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
142 style = styles.orange2;
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
143 }
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
144 return style;
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
145 },
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
146 fwd1() {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
147 return [styles.blue1, styles.textFW1];
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
148 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
149 fwd2() {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
150 return [styles.blue2, styles.textFW2];
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
151 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
152 fwd3() {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
153 return [styles.blue3, styles.textFW3];
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
154 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
155 bottleneck() {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
156 return styles.yellow1;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
157 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
158 bottleneckStatus(feature, resolution, isLegend) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
159 let s = [];
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
161 let bnCenter = getCenter(feature.getGeometry().getExtent());
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
162 s.push(
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
163 new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
164 geometry: new Point(bnCenter),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
165 image: new Icon({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
166 src: require("@/assets/marker-bottleneck-critical.png"),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
167 anchor: [0.5, 0.5],
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
168 scale: isLegend ? 0.5 : 1
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
170 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
171 );
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
172 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
173 if (feature.get("fa_critical") && !isLegend) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
174 s.push(styles.red1);
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
175 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176 return s;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
177 },
3335
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
178 bottleneckFairwayAvailability(feature, resolution, isLegend) {
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
179 let s = [];
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
180 if (isLegend) {
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
181 s.push(
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
182 new Style({
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
183 image: new Icon({
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
184 src: require("@/assets/fa-diagram.png"),
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
185 anchor: [0.5, 0.5],
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
186 scale: 1
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
187 })
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
188 })
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
189 );
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
190 }
3338
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
191 if (
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
192 feature.get("fa_critical") &&
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
193 feature.get("fa_data") &&
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
194 resolution > 15
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
195 ) {
3433
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
196 let data = feature.get("fa_data");
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
197 let lnwlHeight =
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
198 (80 / 100) * data.ldc.find(d => d.hasOwnProperty("from")).percent;
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
199 let belowThresholdHeight =
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
200 (80 / 100) *
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
201 data.afd.find(d => d.hasOwnProperty("to") && !d.hasOwnProperty("from"))
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
202 .percent;
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
203 let betweenThresholdHeight =
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
204 (80 / 100) *
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
205 data.afd.find(d => d.hasOwnProperty("to") && d.hasOwnProperty("from"))
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
206 .percent;
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
207 let aboveThresholdHeight =
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
208 (80 / 100) *
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
209 data.afd.find(d => !d.hasOwnProperty("to") && d.hasOwnProperty("from"))
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
210 .percent;
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
211
3390
8adf1fc51acd client: spuc05: improved diagram size on map
Markus Kottlaender <markus@intevation.de>
parents: 3382
diff changeset
212 let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`;
3433
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
213 let lnwl = `<rect x='2' y='${80 -
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
214 lnwlHeight +
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
215 2}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`;
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
216 let range1 = `<rect x='12' y='2' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`;
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
217 let range2 = `<rect x='12' y='${belowThresholdHeight +
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
218 2}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`;
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
219 let range3 = `<rect x='12' y='${80 -
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
220 aboveThresholdHeight +
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
221 2}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`;
3390
8adf1fc51acd client: spuc05: improved diagram size on map
Markus Kottlaender <markus@intevation.de>
parents: 3382
diff changeset
222 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`;
3338
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
223 let bnCenter = getCenter(feature.getGeometry().getExtent());
3335
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
224 s.push(
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
225 new Style({
3338
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
226 geometry: new Point(bnCenter),
3335
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
227 image: new Icon({
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
228 src: svg,
3390
8adf1fc51acd client: spuc05: improved diagram size on map
Markus Kottlaender <markus@intevation.de>
parents: 3382
diff changeset
229 anchor: [1.2, 1.2]
3335
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
230 })
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
231 })
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
232 );
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
233 }
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
234 return s;
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
235 },
3434
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
236 dataAvailability(feature, resolution, isLegend) {
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
237 let s = [];
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
238 if (isLegend) {
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
239 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
240 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
241 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
242 src: require("@/assets/da-diagram.png"),
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
243 anchor: [0.5, 0.5],
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
244 scale: 1
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
245 })
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
246 })
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
247 );
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
248 } else {
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
249 // TODO: Get information from feature and check the ranges according to #423, #424, #425
3442
030dc48382c9 Adapt color scheme for waterlevel prediction accuracy
Tom Gottfried <tom@intevation.de>
parents: 3434
diff changeset
250 let colorWaterlevel = "white";
3434
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
251 let colorComparison = "lime";
3442
030dc48382c9 Adapt color scheme for waterlevel prediction accuracy
Tom Gottfried <tom@intevation.de>
parents: 3434
diff changeset
252 let colorAccuracy = "white";
030dc48382c9 Adapt color scheme for waterlevel prediction accuracy
Tom Gottfried <tom@intevation.de>
parents: 3434
diff changeset
253 let fa3d = feature.get("forecast_accuracy_3d");
3434
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
254 let fa1d = feature.get("forecast_accuracy_1d");
3442
030dc48382c9 Adapt color scheme for waterlevel prediction accuracy
Tom Gottfried <tom@intevation.de>
parents: 3434
diff changeset
255 if (typeof fa3d == "number" && typeof fa1d == "number") {
030dc48382c9 Adapt color scheme for waterlevel prediction accuracy
Tom Gottfried <tom@intevation.de>
parents: 3434
diff changeset
256 if (fa1d > 15) {
030dc48382c9 Adapt color scheme for waterlevel prediction accuracy
Tom Gottfried <tom@intevation.de>
parents: 3434
diff changeset
257 colorAccuracy = "red";
030dc48382c9 Adapt color scheme for waterlevel prediction accuracy
Tom Gottfried <tom@intevation.de>
parents: 3434
diff changeset
258 } else if (fa3d > 15) {
030dc48382c9 Adapt color scheme for waterlevel prediction accuracy
Tom Gottfried <tom@intevation.de>
parents: 3434
diff changeset
259 colorAccuracy = "yellow";
030dc48382c9 Adapt color scheme for waterlevel prediction accuracy
Tom Gottfried <tom@intevation.de>
parents: 3434
diff changeset
260 } else {
030dc48382c9 Adapt color scheme for waterlevel prediction accuracy
Tom Gottfried <tom@intevation.de>
parents: 3434
diff changeset
261 colorAccuracy = "lime";
030dc48382c9 Adapt color scheme for waterlevel prediction accuracy
Tom Gottfried <tom@intevation.de>
parents: 3434
diff changeset
262 }
3434
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
263 }
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
264 let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='white'/>`;
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
265 let waterlevel = `<polyline points="16,0 24,16 16,32 8,16 16,0" stroke='grey' stroke-width='1' fill='${colorWaterlevel}'/>`;
3443
2eeb5a69d5f2 Exchange comparison and accuracy triangles
Tom Gottfried <tom@intevation.de>
parents: 3442
diff changeset
266 let accuracy = `<polyline points="24,16 32,32 16,32 24,16" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`;
2eeb5a69d5f2 Exchange comparison and accuracy triangles
Tom Gottfried <tom@intevation.de>
parents: 3442
diff changeset
267 let comparison = `<polyline points="8,16 16,32 0,32 8,16" stroke='grey' stroke-width='1' fill='${colorComparison}'/>`;
3434
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
268 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g>${frame}${waterlevel}${comparison}${accuracy}</g></svg>`;
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
269 let maps = store.state.map.openLayersMaps;
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
270 let geom = feature.getGeometry();
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
271 if (!(geom instanceof Point)) {
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
272 geom = new Point(getCenter(feature.getGeometry().getExtent()));
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
273 }
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
274 maps.forEach(m => {
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
275 if (
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
276 (m.getLayer("GAUGES").getVisible() &&
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
277 feature.getId().indexOf("gauges") > -1) ||
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
278 (m.getLayer("STRETCHES").getVisible() &&
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
279 feature.getId().indexOf("stretches") > -1) ||
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
280 (m.getLayer("BOTTLENECKS").getVisible() &&
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
281 feature.getId().indexOf("bottlenecks") > -1)
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
282 ) {
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
283 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
284 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
285 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
286 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
287 src: svg,
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
288 anchor: [-0.5, 1]
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
289 })
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
290 })
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
291 );
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
292 }
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
293 });
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
294 }
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
295 return s;
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
296 },
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
297 dma(feature, resolution) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
298 if (resolution < 10) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
299 var s = styles.circleBlue;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
300 if (resolution < 6) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
301 s.setText(
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
302 new Text({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
303 offsetY: 12,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
304 font: '10px "Open Sans", "sans-serif"',
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
305 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
306 color: "black"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
307 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
308 text: (feature.get("hectometre") / 10).toString()
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
309 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
310 );
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
311 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
312 return s;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
313 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
314 return [];
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
315 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
316 gauge(feature, resolution, isLegend) {
3364
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
317 let waterlevel = feature.get("gm_waterlevel");
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
318 let text = feature.get("objname");
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
319 let iconColor = "white";
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
320 if (waterlevel) {
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
321 text += "\n(" + waterlevel + " cm)";
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
322 let refWaterlevels = JSON.parse(feature.get("reference_water_levels"));
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
323 if (waterlevel < refWaterlevels.LDC) iconColor = "brown";
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
324 if (waterlevel > refWaterlevels.LDC && waterlevel < refWaterlevels.HDC)
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
325 iconColor = "blue";
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
326 if (waterlevel > refWaterlevels.HDC) iconColor = "red";
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
327 }
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
328
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
329 return [
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
330 new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
331 image: new Icon({
3364
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
332 src: require("@/assets/marker-gauge-" + iconColor + ".png"),
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
333 anchor: [0.5, isLegend ? 0.5 : 1],
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
334 scale: isLegend ? 0.5 : 1
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
335 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
336 text: new Text({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
337 font: '10px "Open Sans", "sans-serif"',
3382
2d90ec061458 client: improved gauges label on map
Markus Kottlaender <markus@intevation.de>
parents: 3364
diff changeset
338 offsetY: 15,
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
339 fill: new Fill({
3382
2d90ec061458 client: improved gauges label on map
Markus Kottlaender <markus@intevation.de>
parents: 3364
diff changeset
340 color: "black"
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
341 }),
3382
2d90ec061458 client: improved gauges label on map
Markus Kottlaender <markus@intevation.de>
parents: 3364
diff changeset
342 backgroundFill: new Fill({
2d90ec061458 client: improved gauges label on map
Markus Kottlaender <markus@intevation.de>
parents: 3364
diff changeset
343 color: "rgba(255, 255, 255, 0.7)"
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
344 }),
3382
2d90ec061458 client: improved gauges label on map
Markus Kottlaender <markus@intevation.de>
parents: 3364
diff changeset
345 padding: [2, 2, 2, 2],
3364
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
346 text
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
347 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
348 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
349 ];
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
350 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
351 };