Mercurial > gemma
annotate client/src/components/layers/LegendElement.vue @ 4346:827157bbc2a8
client: show bottleneck area as polygon in map legend
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 09 Sep 2019 11:51:34 +0200 |
parents | ee4c47c3e7b2 |
children | 81577c995161 |
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"> |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
3 <img |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
4 v-if="!isVectorLayer" |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
5 style="margin: 0 auto;display: flex;" |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
6 :src="imgSrc" |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
7 :key="id" |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
8 /> |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
9 </div> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
10 </template> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
11 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
12 <script> |
1362
ca33ad696594
remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1361
diff
changeset
|
13 /* 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
|
14 * 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
|
15 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
16 * SPDX-License-Identifier: AGPL-3.0-or-later |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
17 * 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
|
18 * |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1272
diff
changeset
|
19 * Copyright (C) 2018 by via donau |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 * – Österreichische Wasserstraßen-Gesellschaft mbH |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 * 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
|
22 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 * Author(s): |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 * Thomas Junk <thomas.junk@intevation.de> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
25 */ |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
26 import { mapState } from "vuex"; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
27 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
28 import { Map, View } from "ol"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 import Feature from "ol/Feature"; |
2985
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
30 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
|
31 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
|
32 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
|
33 import LineString from "ol/geom/LineString"; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 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
|
35 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
|
36 import { Stroke, Style, Fill } from "ol/style"; |
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 export default { |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
39 props: ["layer"], |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 data: function() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 return { |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
42 myMap: null, |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
43 src: null, |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
44 url: null |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 computed: { |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
48 ...mapState("map", ["layers", "ongoingRefresh"]), |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
49 isVectorLayer() { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
50 return this.layer.getType() === "VECTOR"; |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
51 }, |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
52 imgSrc() { |
4274
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
53 // if (this.layer.get("id") === "DISTANCEMARKSAXIS") { |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
54 // return require("@/assets/distancemarks-axis.png"); |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
55 // } |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
56 return this.src; |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
57 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 id() { |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
59 return ( |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
60 "legendelement-" + |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
61 this.layer |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
62 .get("label") |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
63 .toLowerCase() |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
64 .replace(/\s/g, "") |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
65 ); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 mstyle() { |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
68 if (this.layer && this.layer.getStyle) { |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
69 return this.layer.getStyle(); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 watch: { |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
74 ongoingRefresh() { |
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
75 if (this.ongoingRefresh) return; |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
76 if ( |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
77 this.layer.get("id") === "OPENSTREETMAP" || |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
78 this.layer.get("id") === "INLANDECDIS" || |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
79 this.layer.get("id") === "BOTTLENECKISOLINE" || |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
80 this.layer.get("id") === "DIFFERENCES" |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
81 ) { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
82 // TODO: Do something useful? |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
83 return; |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
84 } |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
85 if (this.isVectorLayer) { |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
86 this.recreateLayers(); |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
87 } else { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
88 this.loadImageSrc(); |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
89 } |
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
90 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 mstyle(newStyle, oldStyle) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 // only recreate if there already was a style before |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 if (oldStyle) { |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
94 this.recreateLayers(); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
95 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
96 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
97 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
98 mounted() { |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
99 if (this.layer.getType() == "VECTOR") { |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
100 this.initMap(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
101 } else { |
3031 | 102 if ( |
103 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
|
104 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
|
105 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
|
106 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
|
107 ) { |
81c2e561fe03
Use distance marks an axis via WMS. Added legend and featureinfo.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2985
diff
changeset
|
108 // TODO: Do something useful? |
3031 | 109 return; |
3029
81c2e561fe03
Use distance marks an axis via WMS. Added legend and featureinfo.
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2985
diff
changeset
|
110 } |
4274
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
111 if (this.layer.get("id") !== "DISTANCEMARKSAXIS") { |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
112 this.url = |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
113 `/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
|
114 this.layer.getSource().getParams().LAYERS + |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
115 `&legend_options=columns:4;fontAntiAliasing:true`; |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
116 } else { |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
117 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
|
118 `/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
|
119 this.layer.getSource().getParams().LAYERS + |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
120 `&legend_options=columns:1;fontAntiAliasing:true;forceLabels:off`; |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
121 } |
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
122 |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
123 this.loadImageSrc(); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
126 methods: { |
4273
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
127 loadImageSrc() { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
128 HTTP.get(this.url, { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
129 headers: { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
130 "X-Gemma-Auth": localStorage.getItem("token") |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
131 }, |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
132 responseType: "blob" |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
133 }).then(response => { |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
134 this.src = URL.createObjectURL(response.data); |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
135 }); |
9abb63b6b80a
Legend: make styles reloadable
Thomas Junk <thomas.junk@intevation.de>
parents:
4272
diff
changeset
|
136 }, |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
137 recreateLayers() { |
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
138 let vector = this.createVectorLayer(); |
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
139 |
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
140 this.myMap.removeLayer(this.myMap.getLayers()[0]); |
4346
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
141 |
4272
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
142 this.myMap.addLayer(vector); |
dd8ec623b969
LegendElement: refresh legend elements for vector layers
Thomas Junk <thomas.junk@intevation.de>
parents:
3048
diff
changeset
|
143 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
144 initMap() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
145 let vector = this.createVectorLayer(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
146 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
147 this.myMap = new Map({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
148 layers: [vector], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
149 target: this.id, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
150 controls: [], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
151 interactions: [], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
152 view: new View({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
153 center: [0, 0], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
154 zoom: 3, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
155 projection: "EPSG:4326" |
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 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
158 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
159 createVectorLayer() { |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
160 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
|
161 let feature; |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
162 // 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
|
163 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
|
164 feature = new Feature({ |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
165 geometry: new Polygon([ |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
166 [[-1.7, -1.2], [-1.7, 0.5], [1.7, 1.2], [1.7, -0.5]] |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
167 ]) |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
168 }); |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
169 mapStyle = new Style({ |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
170 stroke: new Stroke({ |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
171 color: mapStyle.getStroke().getColor(), |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
172 // 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
|
173 width: 2 |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
174 }), |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
175 fill: new Fill({ |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
176 color: mapStyle.getFill().getColor() |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
177 }) |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
178 }); |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
179 } else { |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
180 feature = new Feature({ |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
181 geometry: new LineString([[-1, -1], [0, 0], [1, 1]]) |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
182 }); |
827157bbc2a8
client: show bottleneck area as polygon in map legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4315
diff
changeset
|
183 } |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
184 // 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
|
185 // 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
|
186 let legendStyle = this.layer.get("forLegendStyle"); |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
187 if (legendStyle) { |
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
188 if (legendStyle) { |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
189 feature.setGeometry(new Point([0, 0])); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
190 } |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
191 mapStyle = this.layer.getStyleFunction()( |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
192 feature, |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
193 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
|
194 true |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
195 ); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
196 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
197 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
198 // 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
|
199 // 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
|
200 // this.layer["forLegendStyle"] for it. |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
201 // 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
|
202 feature.set("level_of_service", ""); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
203 return new VectorLayer({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
204 source: new VectorSource({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
205 features: [feature], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
206 wrapX: false |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
207 }), |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
208 style: mapStyle |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
209 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
210 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
211 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
212 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
213 </script> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
214 |
1449 | 215 <style lang="scss" scoped> |
216 .legendelement { | |
217 max-height: 1.5rem; | |
218 width: 2rem; | |
4274
e4ff09ebc2c3
Legend: distancemarks axis reload
Thomas Junk <thomas.junk@intevation.de>
parents:
4273
diff
changeset
|
219 overflow: hidden; |
1449 | 220 } |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
221 </style> |