Mercurial > gemma
changeset 2909:5105f6ad0176
client: stretches: fixed highlighting of selected stretch
The vectorloader for each layer can now take a callback to postprocess the returned features.
For the stretches layer the selectedStretch (which is now stored in the vuex store) now gets
a 'highlighted' flag. The layer respects that flag to alter the styles.
A watcher on selectedStretch resets the styles when selectedStretch changes and sets the highlighted
flag for the new selectedStretch, if present, otherwise the vectorloader does this job.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 02 Apr 2019 18:19:43 +0200 |
parents | 2821113846a9 |
children | c8c7122047a2 |
files | client/src/components/ImportStretches.vue client/src/components/Maplayer.vue client/src/store/imports.js client/src/store/map.js |
diffstat | 4 files changed, 57 insertions(+), 50 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue Tue Apr 02 17:08:07 2019 +0200 +++ b/client/src/components/ImportStretches.vue Tue Apr 02 18:19:43 2019 +0200 @@ -303,7 +303,6 @@ 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", @@ -343,7 +342,7 @@ ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), ...mapGetters("map", ["getVSourceByName", "getLayerByName"]), ...mapGetters("user", ["isSysAdmin"]), - ...mapState("imports", ["stretches"]), + ...mapState("imports", ["stretches", "selectedStretch"]), defineStretchesLabel() { return this.$gettext("Define Stretches"); }, @@ -381,6 +380,16 @@ this.pipetteStart = false; this.pipetteEnd = false; } + }, + selectedStretch(stretch) { + this.getVSourceByName(LAYERS.STRETCHES) + .getFeatures() + .forEach(f => { + f.set("highlighted", false); + if (f.getId() === stretch.id) { + f.set("highlighted", true); + } + }); } }, methods: { @@ -460,50 +469,14 @@ }); }, 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("imports/selectedStretch", stretch); 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); - } - }); - }, clean() { this.id = ""; this.edit = false;
--- a/client/src/components/Maplayer.vue Tue Apr 02 17:08:07 2019 +0200 +++ b/client/src/components/Maplayer.vue Tue Apr 02 18:19:43 2019 +0200 @@ -67,6 +67,7 @@ ]), ...mapState("bottlenecks", ["selectedSurvey"]), ...mapState("application", ["showSplitscreen"]), + ...mapState("imports", ["selectedStretch"]), hasActiveInteractions() { return ( (this.lineTool && this.lineTool.getActive()) || @@ -76,7 +77,12 @@ } }, methods: { - buildVectorLoader(featureRequestOptions, endpoint, vectorSource) { + buildVectorLoader( + featureRequestOptions, + endpoint, + vectorSource, + featurePostProcessor + ) { // build a function to be used for VectorSource.setLoader() // make use of WFS().writeGetFeature to build the request // and use our HTTP library to actually do it @@ -103,6 +109,9 @@ var features = new GeoJSON().readFeatures( JSON.stringify(response.data) ); + if (featurePostProcessor) { + features.map(f => featurePostProcessor(f)); + } vectorSource.addFeatures(features); // console.log( // "loaded", @@ -369,7 +378,13 @@ geometryName: "area" }, "/internal/wfs", - layer.data.getSource() + layer.data.getSource(), + f => { + if (f.getId() === this.selectedStretch.id) { + f.set("highlighted", true); + } + return f; + } ) ); layer.data.setVisible(layer.isVisible);
--- a/client/src/store/imports.js Tue Apr 02 17:08:07 2019 +0200 +++ b/client/src/store/imports.js Tue Apr 02 18:19:43 2019 +0200 @@ -32,6 +32,7 @@ declined: false, warning: false, stretches: [], + selectedStretch: null, imports: [], reviewed: [], show: null, @@ -128,6 +129,9 @@ setStretches: (state, stretches) => { state.stretches = stretches; }, + selectedStretch: (state, stretch) => { + state.selectedStretch = stretch; + }, setReviewed: (state, reviewed) => { state.reviewed = reviewed; },
--- a/client/src/store/map.js Tue Apr 02 17:08:07 2019 +0200 +++ b/client/src/store/map.js Tue Apr 02 18:19:43 2019 +0200 @@ -121,15 +121,30 @@ source: new VectorSource({ strategy: bboxStrategy }), - style: new Style({ - stroke: new Stroke({ - color: "rgba(250, 200, 0, .8)", - width: 2 - }), - fill: new Fill({ - color: "rgba(250, 200, 10, .3)" - }) - }) + style: feature => { + let style = new Style({ + stroke: new Stroke({ + color: "rgba(250, 200, 0, .8)", + width: 2 + }), + fill: new Fill({ + color: "rgba(250, 200, 10, .3)" + }) + }); + if (feature.get("highlighted")) { + style = new Style({ + stroke: new Stroke({ + color: "rgba(250, 240, 10, .9)", + width: 5 + }), + fill: new Fill({ + color: "rgba(250, 240, 0, .7)" + }) + }); + } + + return style; + } }), isVisible: false },