Mercurial > gemma
comparison client/src/components/map/Zoom.vue @ 3167:85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 06 May 2019 15:13:57 +0200 |
parents | 286c2e3cc105 |
children | 8f421cd3c746 |
comparison
equal
deleted
inserted
replaced
3166:286c2e3cc105 | 3167:85734c763652 |
---|---|
3 <button | 3 <button |
4 class="zoom-button border-0 bg-white rounded-left ui-element" | 4 class="zoom-button border-0 bg-white rounded-left ui-element" |
5 @click="zoomOut" | 5 @click="zoomOut" |
6 > | 6 > |
7 <font-awesome-icon icon="minus" /> | 7 <font-awesome-icon icon="minus" /> |
8 </button> | |
9 <button | |
10 class="zoom-button border-0 bg-white ui-element border-right" | |
11 @click="refreshMap" | |
12 > | |
13 <font-awesome-icon icon="sync" /> | |
14 </button> | 8 </button> |
15 <button | 9 <button |
16 class="zoom-button border-0 bg-white rounded-right ui-element border-right" | 10 class="zoom-button border-0 bg-white rounded-right ui-element border-right" |
17 @click="zoomIn" | 11 @click="zoomIn" |
18 > | 12 > |
25 .zoom-buttons | 19 .zoom-buttons |
26 position: absolute | 20 position: absolute |
27 z-index: 1 | 21 z-index: 1 |
28 bottom: $small-offset | 22 bottom: $small-offset |
29 left: 50% | 23 left: 50% |
30 margin-left: -($icon-width * 1.5) | 24 margin-left: -$icon-width |
31 margin-bottom: 0 | 25 margin-bottom: 0 |
32 transition: margin-bottom 0.3s | 26 transition: margin-bottom 0.3s |
33 | 27 |
34 .zoom-button | 28 .zoom-button |
35 min-height: $icon-width | 29 min-height: $icon-width |
52 * | 46 * |
53 * Author(s): | 47 * Author(s): |
54 * Markus Kottländer <markus@intevation.de> | 48 * Markus Kottländer <markus@intevation.de> |
55 * Thomas Junk <thomas.junk@intevation.de> | 49 * Thomas Junk <thomas.junk@intevation.de> |
56 */ | 50 */ |
57 import { Vector as VectorLayer } from "ol/layer"; | |
58 | |
59 export default { | 51 export default { |
60 props: ["map"], | 52 props: ["map"], |
61 computed: { | 53 computed: { |
62 zoomLevel: { | 54 zoomLevel: { |
63 get() { | 55 get() { |
72 zoomIn() { | 64 zoomIn() { |
73 this.zoomLevel = this.zoomLevel + 1; | 65 this.zoomLevel = this.zoomLevel + 1; |
74 }, | 66 }, |
75 zoomOut() { | 67 zoomOut() { |
76 this.zoomLevel = this.zoomLevel - 1; | 68 this.zoomLevel = this.zoomLevel - 1; |
77 }, | |
78 refreshMap() { | |
79 let layers = this.map.getLayers().getArray(); | |
80 for (let i = 0; i < layers.length; i++) { | |
81 let layer = layers[i]; | |
82 if ( | |
83 layer instanceof VectorLayer && | |
84 layer.get("source").loader_.name != "VOID" | |
85 ) { | |
86 layer.getSource().clear(true); | |
87 layer.getSource().refresh({ force: true }); | |
88 } | |
89 } | |
90 } | 69 } |
91 } | 70 } |
92 }; | 71 }; |
93 </script> | 72 </script> |