Mercurial > gemma

comparison client/src/components/layers/LegendElement.vue @ 1558:0ded4c56978e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>