Mercurial > gemma
changeset 3165:891705431545
client: map zoom controls: each map has it's own independent contrls now
Of course if maps are synced, zooming one still effects the other one.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 06 May 2019 14:27:54 +0200 |
parents | 1de0764f6af4 |
children | 286c2e3cc105 |
files | client/src/components/App.vue client/src/components/Zoom.vue client/src/components/map/Map.vue |
diffstat | 3 files changed, 22 insertions(+), 27 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/App.vue Mon May 06 13:33:19 2019 +0200 +++ b/client/src/components/App.vue Mon May 06 14:27:54 2019 +0200 @@ -23,7 +23,6 @@ <Toolbar v-if="isMapVisible" /> </div> </div> - <Zoom v-if="isMapVisible" /> <Splitscreen v-if="isMapVisible" /> <MinimizedSplitscreens v-if="isMapVisible" /> </div> @@ -97,7 +96,6 @@ Profiles: () => import("./fairway/Profiles"), Gauges: () => import("./gauge/Gauges"), Pdftool: () => import("./Pdftool"), - Zoom: () => import("./Zoom"), Identify: () => import("./identify/Identify"), Layers: () => import("./layers/Layers"), Sidebar: () => import("./Sidebar"),
--- a/client/src/components/Zoom.vue Mon May 06 13:33:19 2019 +0200 +++ b/client/src/components/Zoom.vue Mon May 06 14:27:54 2019 +0200 @@ -1,5 +1,5 @@ <template> - <div :class="['zoom-buttons shadow-xs', { splitscreen: showSplitscreen }]"> + <div class="zoom-buttons shadow-xs"> <button class="zoom-button border-0 bg-white rounded-left ui-element" @click="zoomOut" @@ -21,16 +21,15 @@ </div> </template> -<style lang="sass" scoped> +<style lang="sass"> .zoom-buttons position: absolute + z-index: 1 bottom: $small-offset left: 50% margin-left: -($icon-width * 1.5) margin-bottom: 0 transition: margin-bottom 0.3s - &.splitscreen - margin-bottom: 50vh .zoom-button min-height: $icon-width @@ -55,22 +54,17 @@ * Markus Kottländer <markus@intevation.de> * Thomas Junk <thomas.junk@intevation.de> */ -import { mapState } from "vuex"; import { Vector as VectorLayer } from "ol/layer"; export default { - name: "zoom", + props: ["map"], computed: { - ...mapState("map", ["openLayersMaps"]), - ...mapState("application", ["showSplitscreen"]), zoomLevel: { get() { - return this.openLayersMaps[0].getView().getZoom(); + return this.map.getView().getZoom(); }, set(value) { - this.openLayersMaps[0] - .getView() - .animate({ zoom: value, duration: 300 }); + this.map.getView().animate({ zoom: value, duration: 300 }); } } }, @@ -82,19 +76,17 @@ this.zoomLevel = this.zoomLevel - 1; }, refreshMap() { - this.openLayersMaps.forEach(map => { - let layers = map.getLayers().getArray(); - for (let i = 0; i < layers.length; i++) { - let layer = layers[i]; - if ( - layer instanceof VectorLayer && - layer.get("source").loader_.name != "VOID" - ) { - layer.getSource().clear(true); - layer.getSource().refresh({ force: true }); - } + let layers = this.map.getLayers().getArray(); + for (let i = 0; i < layers.length; i++) { + let layer = layers[i]; + if ( + layer instanceof VectorLayer && + layer.get("source").loader_.name != "VOID" + ) { + layer.getSource().clear(true); + layer.getSource().refresh({ force: true }); } - }); + } } } };
--- a/client/src/components/map/Map.vue Mon May 06 13:33:19 2019 +0200 +++ b/client/src/components/map/Map.vue Mon May 06 14:27:54 2019 +0200 @@ -2,7 +2,9 @@ <div :id="'map-' + paneId" :class="['map', { nocursor: this.hasActiveInteractions }]" - /> + > + <Zoom :map="map" /> + </div> </template> <style lang="sass" scoped> @@ -47,6 +49,9 @@ /* eslint-disable no-console */ export default { mixins: [pane], + components: { + Zoom: () => import("@/components/Zoom") + }, data() { return { map: null,