Mercurial > gemma
annotate client/src/components/layers/LegendElement.vue @ 1558:0ded4c56978e
refac: component filestructure. remove admin/map hierarchy
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 12 Dec 2018 09:22:20 +0100 |
parents | client/src/components/map/layers/LegendElement.vue@bb47531bdd22 |
children | 89c439721db2 |
rev | line source |
---|---|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1272
diff
changeset
|
2 <div :id="id" class="legendelement"></div> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 </template> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
5 <script> |
1362
ca33ad696594
remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1361
diff
changeset
|
6 /* 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
|
7 * 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
|
8 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
9 * SPDX-License-Identifier: AGPL-3.0-or-later |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
10 * 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
|
11 * |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1272
diff
changeset
|
12 * Copyright (C) 2018 by via donau |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
13 * – Österreichische Wasserstraßen-Gesellschaft mbH |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
14 * 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
|
15 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
16 * Author(s): |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
17 * Thomas Junk <thomas.junk@intevation.de> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
18 */ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 import { mapGetters } from "vuex"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 import { Map, View } from "ol"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 import Feature from "ol/Feature"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 import { Vector as VectorLayer } from "ol/layer.js"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 import { Vector as VectorSource } from "ol/source.js"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
25 import LineString from "ol/geom/LineString.js"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 import Point from "ol/geom/Point"; |
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 export default { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 name: "legendelement", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 props: ["layername", "layerindex"], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 data: function() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 return { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 myMap: null, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 mapLayer: null |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 computed: { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 ...mapGetters("map", ["getLayerByName"]), |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 id() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 return "legendelement" + this.layerindex; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 mstyle() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 if (this.mapLayer && this.mapLayer.data.getStyle) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 return this.mapLayer.data.getStyle(); |
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 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 watch: { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 mstyle(newStyle, oldStyle) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 // only recreate if there already was a style before |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 if (oldStyle) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 let vector = this.createVectorLayer(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 this.myMap.removeLayer(this.myMap.getLayers()[0]); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 this.myMap.addLayer(vector); |
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 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 mounted() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 this.mapLayer = this.getLayerByName(this.layername); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 if (this.mapLayer.data.getType() == "VECTOR") { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 this.initMap(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 } else { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 // TODO other tiles |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 } |
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 methods: { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 initMap() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 let vector = this.createVectorLayer(); |
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 this.myMap = new Map({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 layers: [vector], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 target: this.id, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 controls: [], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 interactions: [], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 view: new View({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 center: [0, 0], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 zoom: 3, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 projection: "EPSG:4326" |
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 createVectorLayer() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 let mapStyle = this.mapLayer.data.getStyle(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 let feature = new Feature({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 geometry: new LineString([[-1, 0.5], [0, 0], [0.7, 0], [1.3, -0.7]]) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 // 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
|
91 // parameter or to detect a point layer |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 if (this.mapLayer["forLegendStyle"]) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 if (this.mapLayer.forLegendStyle.point) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
94 feature.setGeometry(new Point([0, 0])); |
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 mapStyle = this.mapLayer.data.getStyleFunction()( |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
97 feature, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
98 this.mapLayer.forLegendStyle.resolution |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
99 ); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
100 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
101 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 // 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
|
103 // the styling function in the future. An idea is to extend the |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 // this.mapLayer["forLegendStyle"] for it. |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 // 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
|
106 feature.set("level_of_service", ""); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 return new VectorLayer({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 source: new VectorSource({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 features: [feature], |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 wrapX: false |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 }), |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 style: mapStyle |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
114 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 </script> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 |
1449 | 119 <style lang="scss" scoped> |
120 .legendelement { | |
121 max-height: 1.5rem; | |
122 width: 2rem; | |
123 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 </style> |