Mercurial > gemma
changeset 1071:f8f398e36e38
client: improve area measurement
* Change way of transfering data for display towards using the store
where different quantities, symbols can be used. This way we do not
depend on the identify tool to find our feature. It avoids the problem
that the final click on a snap to point for an area may not hit our
feshly drawn feature.
At the same time it will get easier to display the measurement result
in a different way, like translating the quantity.
Right now it is displayed on top of the identified box.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Fri, 26 Oct 2018 10:31:52 +0200 |
parents | 12312fb1cda2 |
children | 23b1d8c0e782 |
files | client/src/identify/Identify.vue client/src/map/Maplayer.vue |
diffstat | 2 files changed, 28 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/identify/Identify.vue Fri Oct 26 10:05:20 2018 +0200 +++ b/client/src/identify/Identify.vue Fri Oct 26 10:31:52 2018 +0200 @@ -12,6 +12,11 @@ </div> <hr> <div class="d-flex flex-column features"> + <small v-if="currentMeasurement"> + {{ currentMeasurement.quantity }} + ({{ currentMeasurement.unitSymbol }}): + {{ currentMeasurement.value }} + </small> <div v-for="feature of identifiedFeatures" :key="feature.getId()"> <div v-if="feature.getId()"> {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}: @@ -104,7 +109,7 @@ }, computed: { ...mapGetters("application", ["versionStr"]), - ...mapState("identifystore", ["identifiedFeatures"]), + ...mapState("identifystore", ["identifiedFeatures", "currentMeasurement"]), identifyStyle() { return { "ui-element": true,
--- a/client/src/map/Maplayer.vue Fri Oct 26 10:05:20 2018 +0200 +++ b/client/src/map/Maplayer.vue Fri Oct 26 10:31:52 2018 +0200 @@ -139,6 +139,8 @@ }); }, removeCurrentInteraction() { + this.$store.commit("identifystore/setCurrentMeasurement", null); + this.vectorSource.clear(); this.openLayersMap.removeInteraction(this.interaction); this.interaction = null; }, @@ -149,10 +151,12 @@ type: drawMode, maxPoints: drawMode === "LineString" ? 2 : 50 }); - draw.on("drawstart", event => { + draw.on("drawstart", () => { this.vectorSource.clear(); this.$store.commit("identifystore/setCurrentMeasurement", null); - event.feature.setId("drawn.1"); // unique id for new feature + // we are not setting an id here, to avoid the regular identify to + // pick it up + // event.feature.setId("drawn.1"); // unique id for new feature }); draw.on("drawend", this.drawEnd); return draw; @@ -163,18 +167,27 @@ // also place the a rounded areaSize in a property, // so identify will show it if (areaSize > 100000) { - // convert into 1 km² == 1000*1000 m² and round to 1000 m² - event.feature.set("area (km²)", Math.round(areaSize / 1000) / 1000); + this.$store.commit("identifystore/setCurrentMeasurement", { + quantity: "Area", + unitSymbol: "km²", + // convert into 1 km² == 1000*1000 m² and round to 1000 m² + value: Math.round(areaSize / 1000) / 1000 + }); } else { - event.feature.set("area (m²)", Math.round(areaSize)); + this.$store.commit("identifystore/setCurrentMeasurement", { + quantity: "Area", + unitSymbol: "m²", + value: Math.round(areaSize) + }); } } if (this.drawMode === "LineString") { const length = getLength(event.feature.getGeometry()); - this.$store.commit("identifystore/setCurrentMeasurement", length); - // also place the a rounded length in a property, - // so identify will show it - event.feature.set("length (m)", Math.round(length * 10) / 10); + this.$store.commit("identifystore/setCurrentMeasurement", { + quantity: "Length", + unitSymbol: "m", + value: Math.round(length * 10) / 10 + }); } // if a survey has been selected, request a profile