Mercurial > gemma
comparison 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 |
comparison
equal
deleted
inserted
replaced
1557:62171cd9a42b | 1558:0ded4c56978e |
---|---|
1 <template> | |
2 <div :id="id" class="legendelement"></div> | |
3 </template> | |
4 | |
5 <script> | |
6 /* This is Free Software under GNU Affero General Public License v >= 3.0 | |
7 * without warranty, see README.md and license for details. | |
8 * | |
9 * SPDX-License-Identifier: AGPL-3.0-or-later | |
10 * License-Filename: LICENSES/AGPL-3.0.txt | |
11 * | |
12 * Copyright (C) 2018 by via donau | |
13 * – Österreichische Wasserstraßen-Gesellschaft mbH | |
14 * Software engineering by Intevation GmbH | |
15 * | |
16 * Author(s): | |
17 * Thomas Junk <thomas.junk@intevation.de> | |
18 */ | |
19 import { mapGetters } from "vuex"; | |
20 | |
21 import { Map, View } from "ol"; | |
22 import Feature from "ol/Feature"; | |
23 import { Vector as VectorLayer } from "ol/layer.js"; | |
24 import { Vector as VectorSource } from "ol/source.js"; | |
25 import LineString from "ol/geom/LineString.js"; | |
26 import Point from "ol/geom/Point"; | |
27 | |
28 export default { | |
29 name: "legendelement", | |
30 props: ["layername", "layerindex"], | |
31 data: function() { | |
32 return { | |
33 myMap: null, | |
34 mapLayer: null | |
35 }; | |
36 }, | |
37 computed: { | |
38 ...mapGetters("map", ["getLayerByName"]), | |
39 id() { | |
40 return "legendelement" + this.layerindex; | |
41 }, | |
42 mstyle() { | |
43 if (this.mapLayer && this.mapLayer.data.getStyle) { | |
44 return this.mapLayer.data.getStyle(); | |
45 } | |
46 } | |
47 }, | |
48 watch: { | |
49 mstyle(newStyle, oldStyle) { | |
50 // only recreate if there already was a style before | |
51 if (oldStyle) { | |
52 let vector = this.createVectorLayer(); | |
53 | |
54 this.myMap.removeLayer(this.myMap.getLayers()[0]); | |
55 this.myMap.addLayer(vector); | |
56 } | |
57 } | |
58 }, | |
59 mounted() { | |
60 this.mapLayer = this.getLayerByName(this.layername); | |
61 if (this.mapLayer.data.getType() == "VECTOR") { | |
62 this.initMap(); | |
63 } else { | |
64 // TODO other tiles | |
65 } | |
66 }, | |
67 methods: { | |
68 initMap() { | |
69 let vector = this.createVectorLayer(); | |
70 | |
71 this.myMap = new Map({ | |
72 layers: [vector], | |
73 target: this.id, | |
74 controls: [], | |
75 interactions: [], | |
76 view: new View({ | |
77 center: [0, 0], | |
78 zoom: 3, | |
79 projection: "EPSG:4326" | |
80 }) | |
81 }); | |
82 }, | |
83 createVectorLayer() { | |
84 let mapStyle = this.mapLayer.data.getStyle(); | |
85 | |
86 let feature = new Feature({ | |
87 geometry: new LineString([[-1, 0.5], [0, 0], [0.7, 0], [1.3, -0.7]]) | |
88 }); | |
89 | |
90 // special case if we need to call the style function with a special | |
91 // parameter or to detect a point layer | |
92 if (this.mapLayer["forLegendStyle"]) { | |
93 if (this.mapLayer.forLegendStyle.point) { | |
94 feature.setGeometry(new Point([0, 0])); | |
95 } | |
96 mapStyle = this.mapLayer.data.getStyleFunction()( | |
97 feature, | |
98 this.mapLayer.forLegendStyle.resolution | |
99 ); | |
100 } | |
101 | |
102 // we could add extra properties here, if they are needed for | |
103 // the styling function in the future. An idea is to extend the | |
104 // this.mapLayer["forLegendStyle"] for it. | |
105 // FIXME, this is a special case for the Fairway Dimensions style | |
106 feature.set("level_of_service", ""); | |
107 return new VectorLayer({ | |
108 source: new VectorSource({ | |
109 features: [feature], | |
110 wrapX: false | |
111 }), | |
112 style: mapStyle | |
113 }); | |
114 } | |
115 } | |
116 }; | |
117 </script> | |
118 | |
119 <style lang="scss" scoped> | |
120 .legendelement { | |
121 max-height: 1.5rem; | |
122 width: 2rem; | |
123 } | |
124 </style> |