Mercurial > gemma
changeset 2869:02f51054f648
Client: improv the selected stretch style
* give the selected stretch a distinct style from the other ones
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Fri, 29 Mar 2019 13:20:58 +0100 |
parents | 85dd3f98e18a |
children | 35f6e4383161 |
files | client/src/components/ImportStretches.vue |
diffstat | 1 files changed, 40 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue Fri Mar 29 12:56:29 2019 +0100 +++ b/client/src/components/ImportStretches.vue Fri Mar 29 13:20:58 2019 +0100 @@ -284,6 +284,7 @@ import { LAYERS } from "@/store/map"; import { HTTP } from "@/lib/http"; import { sortTable } from "@/lib/mixins"; +import { Stroke, Style, Fill } from "ol/style.js"; export default { name: "importstretches", @@ -320,6 +321,7 @@ computed: { ...mapState("application", ["searchQuery"]), ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), + ...mapGetters("map", ["getVSourceByName", "getLayerByName"]), ...mapGetters("user", ["isSysAdmin"]), ...mapState("imports", ["stretches"]), defineStretchesLabel() { @@ -438,13 +440,50 @@ }); }, moveMapToStretch(stretch) { + //define new style for the selected stretch + var newStyle = new Style({ + stroke: new Stroke({ + color: "rgba(250, 240, 10, .9)", + width: 5 + }), + fill: new Fill({ + color: "rgba(250, 240, 0, .7)" + }) + }); + let stretchesLayer = this.getLayerByName(LAYERS.STRETCHES); + let oldStyle = stretchesLayer.data.getStyle(); this.$store.commit("map/setLayerVisible", LAYERS.STRETCHES); + var stretches = stretchesLayer.data.getSource().getFeatures(); + // change the style when the the stretches are already loaded + if (stretches.length) { + this.setStretchStyle(stretches, stretch, oldStyle, newStyle); + } else { + // by choosing stretch first time wating to load the features then change the style + stretchesLayer.data.getSource().once("change", () => { + this.setStretchStyle( + stretchesLayer.data.getSource().getFeatures(), + stretch, + oldStyle, + newStyle + ); + }); + } this.$store.commit("map/moveToExtent", { feature: stretch, zoom: 17, preventZoomOut: true }); }, + // give the selected stretch new style and set the orginal style to the others + setStretchStyle(features, stretch, oldStyle, newStyle) { + features.forEach(f => { + if (f.id_ === stretch.id) { + f.setStyle(newStyle); + } else { + f.setStyle(oldStyle); + } + }); + }, loadStretches() { return new Promise((resolve, reject) => { this.$store @@ -569,7 +608,7 @@ }, mounted() { this.edit = false; - this.loadStretches().catch(error => { + this.$store.dispatch("imports/loadStretches").catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"),