Mercurial > gemma

annotate client/src/layers/LegendElement.vue @ 1030:bf10a7f990cc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: fairway profile retrieves current data from store
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 24 Oct 2018 15:09:06 +0200
parents ca628dce90dd
children 595654ad3f66
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
799
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
1 <template>
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
2 <div :id="id" class="bg-light shadow-sm rounded legendelement"></div>
799
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
3
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
4 </template>
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
5
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
6 <script>
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
7 /*
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
8 * This is Free Software under GNU Affero General Public License v >= 3.0
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
9 * without warranty, see README.md and license for details.
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
10 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
11 * SPDX-License-Identifier: AGPL-3.0-or-later
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
12 * License-Filename: LICENSES/AGPL-3.0.txt
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
13 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
14 * Copyright (C) 2018 by via donau
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
15 * – Österreichische Wasserstraßen-Gesellschaft mbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
16 * Software engineering by Intevation GmbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
17 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
18 * Author(s):
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
19 * Thomas Junk <thomas.junk@intevation.de>
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 882
diff changeset
20 */
804
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
21 import { mapGetters } from "vuex";
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
22
799
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
23 import { Map, View } from "ol";
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
24 import Feature from "ol/Feature";
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
25 import { Vector as VectorLayer } from "ol/layer.js";
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
26 import { Vector as VectorSource } from "ol/source.js";
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
27 import LineString from "ol/geom/LineString.js";
804
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
28 import Point from "ol/geom/Point";
799
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
29
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
30 export default {
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
31 name: "legendelement",
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
32 props: ["layername", "layerindex"],
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
33 data: function() {
804
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
34 return {
882
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
35 myMap: null,
804
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
36 mapLayer: null
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
37 };
799
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
38 },
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
39 computed: {
804
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
40 ...mapGetters("mapstore", ["getLayerByName"]),
799
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
41 id() {
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
42 return "legendelement" + this.layerindex;
882
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
43 },
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
44 mstyle() {
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
45 if (this.mapLayer && this.mapLayer.data.getStyle) {
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
46 return this.mapLayer.data.getStyle();
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
47 }
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
48 }
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
49 },
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
50 watch: {
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
51 mstyle(newStyle, oldStyle) {
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
52 // only recreate if there already was a style before
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
53 if (oldStyle) {
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
54 let vector = this.createVectorLayer();
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
55
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
56 this.myMap.removeLayer(this.myMap.getLayers()[0]);
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
57 this.myMap.addLayer(vector);
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
58 }
799
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
59 }
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
60 },
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
61 mounted() {
804
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
62 this.mapLayer = this.getLayerByName(this.layername);
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
63 if (this.mapLayer.data.getType() == "VECTOR") {
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
64 this.initMap();
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
65 } else {
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
66 // TODO other tiles
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
67 }
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
68 },
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
69 methods: {
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
70 initMap() {
882
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
71 let vector = this.createVectorLayer();
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
72
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
73 this.myMap = new Map({
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
74 layers: [vector],
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
75 target: this.id,
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
76 controls: [],
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
77 interactions: [],
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
78 view: new View({
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
79 center: [0, 0],
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
80 zoom: 3,
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
81 projection: "EPSG:4326"
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
82 })
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
83 });
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
84 },
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
85 createVectorLayer() {
804
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
86 let mapStyle = this.mapLayer.data.getStyle();
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
87
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
88 let feature = new Feature({
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
89 geometry: new LineString([[-1, 0.5], [0, 0], [0.7, 0], [1.3, -0.7]])
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
90 });
799
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
91
804
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
92 // special case if we need to call the style function with a special
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
93 // parameter or to detect a point layer
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
94 if (this.mapLayer["forLegendStyle"]) {
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
95 if (this.mapLayer.forLegendStyle.point) {
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
96 feature.setGeometry(new Point([0, 0]));
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
97 }
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
98 mapStyle = this.mapLayer.data.getStyleFunction()(
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
99 feature,
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
100 this.mapLayer.forLegendStyle.resolution
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
101 );
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
102 }
799
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
103
805
12263aeb9c15 client: improve LegendElement code style
Bernhard Reiter <bernhard@intevation.de>
parents: 804
diff changeset
104 // we could add extra properties here, if they are needed for
12263aeb9c15 client: improve LegendElement code style
Bernhard Reiter <bernhard@intevation.de>
parents: 804
diff changeset
105 // the styling function in the future. An idea is to extend the
12263aeb9c15 client: improve LegendElement code style
Bernhard Reiter <bernhard@intevation.de>
parents: 804
diff changeset
106 // this.mapLayer["forLegendStyle"] for it.
12263aeb9c15 client: improve LegendElement code style
Bernhard Reiter <bernhard@intevation.de>
parents: 804
diff changeset
107 // FIXME, this is a special case for the Fairway Dimensions style
804
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
108 feature.set("level_of_service", "");
882
27282bfd1ba7 client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents: 805
diff changeset
109 return new VectorLayer({
804
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
110 source: new VectorSource({
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
111 features: [feature],
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
112 wrapX: false
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
113 }),
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
114 style: mapStyle
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
115 });
21609ba97357 client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents: 800
diff changeset
116 }
799
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
117 }
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
118 };
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
119 </script>
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
120
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
121 <style scoped>
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
122 .legendelement {
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
123 max-height: 1.5rem;
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
124 width: 2rem;
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
125 }
959892ffd72c client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
126 </style>