Mercurial > gemma
annotate client/src/layers/LegendElement.vue @ 1170:3807b6c2cfbf
merge
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 14 Nov 2018 12:31:15 +0100 |
parents | 595654ad3f66 |
children | 104d41ea7c15 |
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: { |
1113
595654ad3f66
renamed mapstore to map (like other stores)
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
40 ...mapGetters("map", ["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> |