Mercurial > gemma

changeset 1071:f8f398e36e38

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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