Mercurial > gemma
annotate client/src/components/layers/LegendElement.vue @ 5629:84d01a536bec 729-node-js-newer-version
Transformed scss and sass styles into css
author | Luisa Beerboom <lbeerboom@intevation.de> |
---|---|
date | Thu, 11 May 2023 13:23:52 +0200 |
parents | 453a33b0717d |
children |
rev | line source |
---|---|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
2 <div :id="id" class="legendelement"> |
4983
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
3 <div v-if="layer.get('id') === 'FAIRWAYMARKS'"> |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
4 <img |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
5 v-if="!isVectorLayer" |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
6 style="margin: 0 auto;display: flex;" |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
7 src="@/assets/fm_legend.svg" |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
8 :key="id" |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
9 /> |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
10 </div> |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
11 <div v-else=""> |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
12 <img |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
13 v-if="!isVectorLayer" |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
14 style="margin: 0 auto;display: flex;" |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
15 :src="imgSrc" |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
16 :key="id" |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
17 /> |
9b1da062cbee
fairwaymarks legend icon added
Thomas Junk <thomas.junk@intevation.de>
parents:
4806
diff
changeset
|
18 </div> |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
19 </div> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 </template> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 <script> |
1362
ca33ad696594
remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1361
diff
changeset
|
23 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 * without warranty, see README.md and license for details. |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1272
diff
changeset
|
25 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 * SPDX-License-Identifier: AGPL-3.0-or-later |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
27 * License-Filename: LICENSES/AGPL-3.0.txt |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1272
diff
changeset
|
28 * |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1272
diff
changeset
|
29 * Copyright (C) 2018 by via donau |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 * – Österreichische Wasserstraßen-Gesellschaft mbH |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 * Software engineering by Intevation GmbH |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1272
diff
changeset
|
32 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 * Author(s): |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 * Thomas Junk <thomas.junk@intevation.de> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 */ |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
36 import { mapState } from "vuex"; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 import { Map, View } from "ol"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 import Feature from "ol/Feature"; |
2985
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
40 import { Vector as VectorLayer } from "ol/layer"; |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
41 import { Vector as VectorSource } from "ol/source"; |
4346
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
42 import Polygon from "ol/geom/Polygon"; |
2985
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
43 import LineString from "ol/geom/LineString"; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 import Point from "ol/geom/Point"; |
3029
81c2e561fe03
Use distance marks an axis via WMS. Added legend and featureinfo.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2985
diff
changeset
|
45 import { HTTP } from "@/lib/http"; |
4346
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
46 import { Stroke, Style, Fill } from "ol/style"; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 export default { |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
49 props: ["layer"], |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 data: function() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 return { |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
52 myMap: null, |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
53 src: null, |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
54 url: null |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 computed: { |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
58 ...mapState("map", ["layers", "ongoingRefresh"]), |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
59 isVectorLayer() { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
60 return this.layer.getType() === "VECTOR"; |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
61 }, |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
62 imgSrc() { |
4274
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
63 // if (this.layer.get("id") === "DISTANCEMARKSAXIS") { |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
64 // return require("@/assets/distancemarks-axis.png"); |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
65 // } |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
66 return this.src; |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
67 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 id() { |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
69 return ( |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
70 "legendelement-" + |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
71 this.layer |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
72 .get("label") |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
73 .toLowerCase() |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
74 .replace(/\s/g, "") |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
75 ); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 mstyle() { |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
78 if (this.layer && this.layer.getStyle) { |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
79 return this.layer.getStyle(); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
80 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
83 watch: { |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
84 ongoingRefresh() { |
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
85 if (this.ongoingRefresh) return; |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
86 if ( |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
87 this.layer.get("id") === "OPENSTREETMAP" || |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
88 this.layer.get("id") === "INLANDECDIS" || |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
89 this.layer.get("id") === "BOTTLENECKISOLINE" || |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
90 this.layer.get("id") === "DIFFERENCES" |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
91 ) { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
92 // TODO: Do something useful? |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
93 return; |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
94 } |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
95 if (this.isVectorLayer) { |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
96 this.recreateLayers(); |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
97 } else { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
98 this.loadImageSrc(); |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
99 } |
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
100 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
101 mstyle(newStyle, oldStyle) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 // only recreate if there already was a style before |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 if (oldStyle) { |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
104 this.recreateLayers(); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 mounted() { |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
109 if (this.layer.getType() == "VECTOR") { |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 this.initMap(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 } else { |
3031 | 112 if ( |
113 this.layer.get("id") === "OPENSTREETMAP" || | |
3029
81c2e561fe03
Use distance marks an axis via WMS. Added legend and featureinfo.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2985
diff
changeset
|
114 this.layer.get("id") === "INLANDECDIS" || |
81c2e561fe03
Use distance marks an axis via WMS. Added legend and featureinfo.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2985
diff
changeset
|
115 this.layer.get("id") === "BOTTLENECKISOLINE" || |
81c2e561fe03
Use distance marks an axis via WMS. Added legend and featureinfo.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2985
diff
changeset
|
116 this.layer.get("id") === "DIFFERENCES" |
81c2e561fe03
Use distance marks an axis via WMS. Added legend and featureinfo.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2985
diff
changeset
|
117 ) { |
81c2e561fe03
Use distance marks an axis via WMS. Added legend and featureinfo.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2985
diff
changeset
|
118 // TODO: Do something useful? |
3031 | 119 return; |
3029
81c2e561fe03
Use distance marks an axis via WMS. Added legend and featureinfo.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2985
diff
changeset
|
120 } |
4274
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
121 if (this.layer.get("id") !== "DISTANCEMARKSAXIS") { |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
122 this.url = |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
123 `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=` + |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
124 this.layer.getSource().getParams().LAYERS + |
5476
453a33b0717d
GetLegendGraphics URL escaped ';' by '%3B'.
Thomas Junk <thomas.junk@intevation.de>
parents:
5219
diff
changeset
|
125 `&legend_options=columns:4%3BfontAntiAliasing:true`; |
4274
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
126 } else { |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
127 this.url = |
4315
ee4c47c3e7b2
legend: request distancemarks axis image at a specific scale to get correct styling
Thomas Junk <thomas.junk@intevation.de>
parents:
4274
diff
changeset
|
128 `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&SCALE=80000&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=` + |
4274
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
129 this.layer.getSource().getParams().LAYERS + |
5476
453a33b0717d
GetLegendGraphics URL escaped ';' by '%3B'.
Thomas Junk <thomas.junk@intevation.de>
parents:
5219
diff
changeset
|
130 `&legend_options=columns:1%3BfontAntiAliasing:true%3BforceLabels:off`; |
4274
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
131 } |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
132 |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
133 this.loadImageSrc(); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
134 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
135 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
136 methods: { |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
137 loadImageSrc() { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
138 HTTP.get(this.url, { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
139 headers: { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
140 "X-Gemma-Auth": localStorage.getItem("token") |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
141 }, |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
142 responseType: "blob" |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
143 }).then(response => { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
144 this.src = URL.createObjectURL(response.data); |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
145 }); |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
146 }, |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
147 recreateLayers() { |
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
148 let vector = this.createVectorLayer(); |
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
149 |
4347
81577c995161
legend: removal of layers adjusted
Thomas Junk <thomas.junk@intevation.de>
parents:
4346
diff
changeset
|
150 this.myMap.removeLayer(this.myMap.getLayers().getArray()[0]); |
4346
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
151 |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
152 this.myMap.addLayer(vector); |
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
153 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
154 initMap() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
155 let vector = this.createVectorLayer(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
156 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
157 this.myMap = new Map({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
158 layers: [vector], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
159 target: this.id, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
160 controls: [], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
161 interactions: [], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
162 view: new View({ |
4806
a905438a7935
map: disable rotation
Thomas Junk <thomas.junk@intevation.de>
parents:
4396
diff
changeset
|
163 enableRotation: false, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
164 center: [0, 0], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
165 zoom: 3, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
166 projection: "EPSG:4326" |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
167 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
168 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
169 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
170 createVectorLayer() { |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
171 let mapStyle = this.layer.getStyle(); |
4346
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
172 let feature; |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
173 // show bottleneck legend as polygon |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
174 if (this.layer.get("id") === "BOTTLENECKS") { |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
175 feature = new Feature({ |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
176 geometry: new Polygon([ |
5219 | 177 [ |
178 [-1.7, -1.2], | |
179 [-1.7, 0.5], | |
180 [1.7, 1.2], | |
181 [1.7, -0.5] | |
182 ] | |
4346
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
183 ]) |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
184 }); |
4396
b9f63a55815e
legend: make more robust detection of style. It could be an object or a function
Thomas Junk <thomas.junk@intevation.de>
parents:
4347
diff
changeset
|
185 if (typeof mapStyle === "function") { |
b9f63a55815e
legend: make more robust detection of style. It could be an object or a function
Thomas Junk <thomas.junk@intevation.de>
parents:
4347
diff
changeset
|
186 mapStyle = mapStyle(); |
b9f63a55815e
legend: make more robust detection of style. It could be an object or a function
Thomas Junk <thomas.junk@intevation.de>
parents:
4347
diff
changeset
|
187 } |
4346
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
188 mapStyle = new Style({ |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
189 stroke: new Stroke({ |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
190 color: mapStyle.getStroke().getColor(), |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
191 // reduce the stroke width for better layout in map legend. |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
192 width: 2 |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
193 }), |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
194 fill: new Fill({ |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
195 color: mapStyle.getFill().getColor() |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
196 }) |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
197 }); |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
198 } else { |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
199 feature = new Feature({ |
5219 | 200 geometry: new LineString([ |
201 [-1, -1], | |
202 [0, 0], | |
203 [1, 1] | |
204 ]) | |
4346
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
205 }); |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
206 } |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
207 // special case if we need to call the style function with a special |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
208 // parameter or to detect a point layer |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
209 let legendStyle = this.layer.get("forLegendStyle"); |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
210 if (legendStyle) { |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
211 if (legendStyle) { |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
212 feature.setGeometry(new Point([0, 0])); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
213 } |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
214 mapStyle = this.layer.getStyleFunction()( |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
215 feature, |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
216 legendStyle.resolution, |
2506
89c439721db2
client: new symbold for critical bottlenecks, normal bottlenecks are not marked anymore
Markus Kottlaender <markus@intevation.de>
parents:
1558
diff
changeset
|
217 true |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
218 ); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
219 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
220 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
221 // we could add extra properties here, if they are needed for |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
222 // the styling function in the future. An idea is to extend the |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
223 // this.layer["forLegendStyle"] for it. |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
224 // FIXME, this is a special case for the Fairway Dimensions style |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
225 feature.set("level_of_service", ""); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
226 return new VectorLayer({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
227 source: new VectorSource({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
228 features: [feature], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
229 wrapX: false |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
230 }), |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
231 style: mapStyle |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
232 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
233 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
234 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
235 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
236 </script> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
237 |
5629
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5476
diff
changeset
|
238 <style scoped> |
1449 | 239 .legendelement { |
240 max-height: 1.5rem; | |
241 width: 2rem; | |
4274
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
242 overflow: hidden; |
1449 | 243 } |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
244 </style> |