Mercurial > gemma
annotate client/src/layers/LegendElement.vue @ 904:e4b72a199258
New default bottleneck colors
Mainly to make the stroke color one actually selectable in the ui.
In addition the pink does better match the collors used on the ECDIS layer.
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Tue, 02 Oct 2018 13:34:59 +0200 |
parents | 27282bfd1ba7 |
children | ca628dce90dd |
rev | line source |
---|---|
799
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
1 <template> |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
2 <div :id="id" class="bg-light shadow-sm rounded legendelement"></div> |
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> |
804
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
7 import { mapGetters } from "vuex"; |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
8 |
799
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
9 import { Map, View } from "ol"; |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
10 import Feature from "ol/Feature"; |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
11 import { Vector as VectorLayer } from "ol/layer.js"; |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
12 import { Vector as VectorSource } from "ol/source.js"; |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
13 import LineString from "ol/geom/LineString.js"; |
804
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
14 import Point from "ol/geom/Point"; |
799
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
15 |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
16 export default { |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
17 name: "legendelement", |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
18 props: ["layername", "layerindex"], |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
19 data: function() { |
804
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
20 return { |
882
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
21 myMap: null, |
804
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
22 mapLayer: null |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
23 }; |
799
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
24 }, |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
25 computed: { |
804
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
26 ...mapGetters("mapstore", ["getLayerByName"]), |
799
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
27 id() { |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
28 return "legendelement" + this.layerindex; |
882
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
29 }, |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
30 mstyle() { |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
31 if (this.mapLayer && this.mapLayer.data.getStyle) { |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
32 return this.mapLayer.data.getStyle(); |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
33 } |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
34 } |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
35 }, |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
36 watch: { |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
37 mstyle(newStyle, oldStyle) { |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
38 // only recreate if there already was a style before |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
39 if (oldStyle) { |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
40 let vector = this.createVectorLayer(); |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
41 |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
42 this.myMap.removeLayer(this.myMap.getLayers()[0]); |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
43 this.myMap.addLayer(vector); |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
44 } |
799
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
45 } |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
46 }, |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
47 mounted() { |
804
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
48 this.mapLayer = this.getLayerByName(this.layername); |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
49 if (this.mapLayer.data.getType() == "VECTOR") { |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
50 this.initMap(); |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
51 } else { |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
52 // TODO other tiles |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
53 } |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
54 }, |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
55 methods: { |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
56 initMap() { |
882
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
57 let vector = this.createVectorLayer(); |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
58 |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
59 this.myMap = new Map({ |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
60 layers: [vector], |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
61 target: this.id, |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
62 controls: [], |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
63 interactions: [], |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
64 view: new View({ |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
65 center: [0, 0], |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
66 zoom: 3, |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
67 projection: "EPSG:4326" |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
68 }) |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
69 }); |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
70 }, |
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
71 createVectorLayer() { |
804
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
72 let mapStyle = this.mapLayer.data.getStyle(); |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
73 |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
74 let feature = new Feature({ |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
75 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
|
76 }); |
799
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
77 |
804
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
78 // 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
|
79 // parameter or to detect a point layer |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
80 if (this.mapLayer["forLegendStyle"]) { |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
81 if (this.mapLayer.forLegendStyle.point) { |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
82 feature.setGeometry(new Point([0, 0])); |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
83 } |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
84 mapStyle = this.mapLayer.data.getStyleFunction()( |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
85 feature, |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
86 this.mapLayer.forLegendStyle.resolution |
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 } |
799
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
89 |
805
12263aeb9c15
client: improve LegendElement code style
Bernhard Reiter <bernhard@intevation.de>
parents:
804
diff
changeset
|
90 // 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
|
91 // 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
|
92 // this.mapLayer["forLegendStyle"] for it. |
12263aeb9c15
client: improve LegendElement code style
Bernhard Reiter <bernhard@intevation.de>
parents:
804
diff
changeset
|
93 // 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
|
94 feature.set("level_of_service", ""); |
882
27282bfd1ba7
client: make LegendElement more dynamic
Bernhard Reiter <bernhard@intevation.de>
parents:
805
diff
changeset
|
95 return new VectorLayer({ |
804
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
96 source: new VectorSource({ |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
97 features: [feature], |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
98 wrapX: false |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
99 }), |
21609ba97357
client: improve legendelements for layerselection
Bernhard Reiter <bernhard@intevation.de>
parents:
800
diff
changeset
|
100 style: mapStyle |
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 } |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
104 }; |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
105 </script> |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
106 |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
107 <style scoped> |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
108 .legendelement { |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
109 max-height: 1.5rem; |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
110 width: 2rem; |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
111 } |
959892ffd72c
client: add new LegendElement to layerselection box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
112 </style> |