Mercurial > gemma

annotate client/src/components/map/styles.js @ 3480:965b2fbb1890

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Colorize gauge symbol based on availability of measurements
author Tom Gottfried <tom@intevation.de>
date Mon, 27 May 2019 15:45:55 +0200
parents 71022e6bd98e
children c5c7cc24fe72
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";
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({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 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
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({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 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
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({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 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
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({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 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
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({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 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
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({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 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
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
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
132 export default {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
133 stretches(feature) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 let style = styles.yellow2;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 if (feature.get("highlighted")) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 style = styles.yellow3;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
137 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 return style;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 },
3309
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
140 sections(feature) {
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
141 let style = styles.orange1;
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
142 if (feature.get("highlighted")) {
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
143 style = styles.orange2;
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
144 }
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
145 return style;
80037790032d client: fully implemented sections
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
146 },
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
147 fwd1() {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
148 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
149 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
150 fwd2() {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
151 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
152 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
153 fwd3() {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
154 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
155 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
156 bottleneck() {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
157 return styles.yellow1;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
158 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
159 bottleneckStatus(feature, resolution, isLegend) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 let s = [];
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
161 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
162 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
163 s.push(
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
164 new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
165 geometry: new Point(bnCenter),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
166 image: new Icon({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
167 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
168 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
169 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
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 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
174 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
175 s.push(styles.red1);
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
177 return s;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
178 },
3335
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
179 bottleneckFairwayAvailability(feature, resolution, isLegend) {
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
180 let s = [];
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
181 if (isLegend) {
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
182 s.push(
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
183 new Style({
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
184 image: new Icon({
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
185 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
186 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
187 scale: 1
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 );
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
191 }
3338
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
192 if (
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
193 feature.get("fa_critical") &&
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
194 feature.get("fa_data") &&
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
195 resolution > 15
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
196 ) {
3433
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
197 let data = feature.get("fa_data");
3457
870812d8f247 client: spuc05: implemented new data format (csv) for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3448
diff changeset
198 let lnwlHeight = (80 / 100) * data.ldc;
870812d8f247 client: spuc05: implemented new data format (csv) for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3448
diff changeset
199 let belowThresholdHeight = (80 / 100) * data.below;
870812d8f247 client: spuc05: implemented new data format (csv) for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3448
diff changeset
200 let betweenThresholdHeight = (80 / 100) * data.between;
870812d8f247 client: spuc05: implemented new data format (csv) for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3448
diff changeset
201 let aboveThresholdHeight = (80 / 100) * data.above;
3433
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
202
3390
8adf1fc51acd client: spuc05: improved diagram size on map
Markus Kottlaender <markus@intevation.de>
parents: 3382
diff changeset
203 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
204 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
205 lnwlHeight +
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
206 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
207 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
208 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
209 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
210 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
211 aboveThresholdHeight +
e56b280582ae client: spuc05: use real data for diagrams on map
Markus Kottlaender <markus@intevation.de>
parents: 3390
diff changeset
212 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
213 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
214 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
215 s.push(
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
216 new Style({
3338
8c435f9a85bb client: fairway availibility layer: better positioning/scalign of diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3335
diff changeset
217 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
218 image: new Icon({
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
219 src: svg,
3390
8adf1fc51acd client: spuc05: improved diagram size on map
Markus Kottlaender <markus@intevation.de>
parents: 3382
diff changeset
220 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
221 })
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
222 })
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
223 );
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
224 }
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
225 return s;
59db0b5921c5 client: added layer for fairway availability diagrams with demo diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3312
diff changeset
226 },
3434
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
227 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
228 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
229 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
230 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
231 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
232 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
233 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
234 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
235 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
236 })
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
237 })
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
238 );
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
239 } else {
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
240 // TODO: Get information from feature and check the ranges according to #423, #424, #425
3480
965b2fbb1890 Colorize gauge symbol based on availability of measurements
Tom Gottfried <tom@intevation.de>
parents: 3472
diff changeset
241 let colorWaterlevel = classifications.gmAvailability(feature);
3472
71022e6bd98e client: Use classifications for bottleneck diagrams on map and extracted classification algos
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3457
diff changeset
242 let colorUniformTriangle = "lime";
71022e6bd98e client: Use classifications for bottleneck diagrams on map and extracted classification algos
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3457
diff changeset
243 let colorComparison = "white";
71022e6bd98e client: Use classifications for bottleneck diagrams on map and extracted classification algos
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3457
diff changeset
244 let colorAccuracy = classifications.forecastAccuracy(feature);
3434
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
245 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
246 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
247 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
248 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
249 }
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
250 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
251 if (
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
252 (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
253 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
254 (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
255 feature.getId().indexOf("stretches") > -1) ||
3444
1559566662f5 client: data accuracy: Add diagram for sections.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3443
diff changeset
256 (m.getLayer("SECTIONS").getVisible() &&
1559566662f5 client: data accuracy: Add diagram for sections.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3443
diff changeset
257 feature.getId().indexOf("sections") > -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
258 ) {
3448
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
259 let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='white'/>`;
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
260 let waterlevel = `<polyline points="16,0 24,16 16,32 8,16 16,0" stroke='grey' stroke-width='1' fill='${colorWaterlevel}'/>`;
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
261 let accuracy = `<polyline points="24,16 32,32 16,32 24,16" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`;
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
262 let comparison = `<polyline points="8,16 16,32 0,32 8,16" stroke='grey' stroke-width='1' fill='${colorComparison}'/>`;
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
263 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>`;
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
264 s.push(
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
265 new Style({
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
266 geometry: geom,
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
267 image: new Icon({
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
268 src: svg,
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
269 anchor: [-0.5, 1]
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
270 })
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
271 })
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
272 );
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
273 }
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
274 if (
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
275 m.getLayer("BOTTLENECKS").getVisible() &&
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
276 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
277 ) {
3472
71022e6bd98e client: Use classifications for bottleneck diagrams on map and extracted classification algos
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3457
diff changeset
278 colorUniformTriangle = classifications.surveyCurrency(feature);
71022e6bd98e client: Use classifications for bottleneck diagrams on map and extracted classification algos
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3457
diff changeset
279 let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='${colorUniformTriangle}'/>`;
3448
d0278e7399fb client: data accuracy: use single color for bottlenecks in diagram.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3444
diff changeset
280 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><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
281 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
282 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
283 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
284 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
285 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
286 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
287 })
9fba1be118e7 client: data accuracy: Show diagrams for gauges, bottlenecks and stretches on map.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 3433
diff changeset
288 })
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 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
294 },
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
295 dma(feature, resolution) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
296 if (resolution < 10) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
297 var s = styles.circleBlue;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
298 if (resolution < 6) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
299 s.setText(
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
300 new Text({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
301 offsetY: 12,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
302 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
303 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
304 color: "black"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
305 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
306 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
307 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
308 );
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 return s;
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 [];
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 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
315 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
316 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
317 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
318 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
319 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
320 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
321 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
322 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
323 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
324 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
325 }
b62b9d5ce06d client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
Markus Kottlaender <markus@intevation.de>
parents: 3338
diff changeset
326
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
327 return [
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
328 new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
329 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
330 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
331 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
332 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
333 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
334 text: new Text({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
335 font: '10px "Open Sans", "sans-serif"',
3382
2d90ec061458 client: improved gauges label on map
Markus Kottlaender <markus@intevation.de>
parents: 3364
diff changeset
336 offsetY: 15,
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
337 fill: new Fill({
3382
2d90ec061458 client: improved gauges label on map
Markus Kottlaender <markus@intevation.de>
parents: 3364
diff changeset
338 color: "black"
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
339 }),
3382
2d90ec061458 client: improved gauges label on map
Markus Kottlaender <markus@intevation.de>
parents: 3364
diff changeset
340 backgroundFill: new Fill({
2d90ec061458 client: improved gauges label on map
Markus Kottlaender <markus@intevation.de>
parents: 3364
diff changeset
341 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
342 }),
3382
2d90ec061458 client: improved gauges label on map
Markus Kottlaender <markus@intevation.de>
parents: 3364
diff changeset
343 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
344 text
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
345 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
346 })
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 };