Mercurial > gemma

annotate client/src/layers/LegendElement.vue @ 941:8a80ef09a62c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve identify * Remove trigger that unfolds the box when features are identified. Rationale: This makes the user interface too "jumpy". * Instead add a style change for the icon to indicate if data is available. It will use the bootstrap `text-info` style class. * Simplify code that detects if a bottleneck was identified.
author Bernhard Reiter <bernhard@intevation.de>
date Tue, 09 Oct 2018 17:00:49 +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>