Mercurial > gemma

annotate client/src/layers/LegendElement.vue @ 904:e4b72a199258

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