Mercurial > gemma

changeset 1164:dc99decbf9e3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added input to enter cross cut coordinates manually currently the input field is placed in the cross profile view, so you need to make a first cut to access this field. There needs to be another field that is accesible immediately, without making a cross cut first. Duplicated code needs to be fixed/centralized. UI needs to be improved.
author Markus Kottlaender <markus@intevation.de>
date Wed, 14 Nov 2018 09:03:20 +0100
parents fb5c83d4ea1d
children a44ac5193b38
files client/src/drawtool/Drawtool.vue client/src/fairway/Fairwayprofile.vue
diffstat 2 files changed, 131 insertions(+), 37 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/drawtool/Drawtool.vue	Wed Nov 14 07:29:51 2018 +0100
+++ b/client/src/drawtool/Drawtool.vue	Wed Nov 14 09:03:20 2018 +0100
@@ -190,10 +190,31 @@
         this.$store
           .dispatch("fairwayprofile/loadProfile", this.selectedSurvey)
           .then(() => {
-            var vectorSource = this.getLayerByName(
-              "Fairway Dimensions"
-            ).data.getSource();
-            this.calculateIntersection(vectorSource, profileLine);
+            this.getLayerByName("Fairway Dimensions")
+              .data.getSource()
+              .forEachFeatureIntersectingExtent(
+                // need to use EPSG:3857 which is the proj of vectorSource
+                profileLine
+                  .clone()
+                  .transform("EPSG:4326", "EPSG:3857")
+                  .getExtent(),
+                feature => {
+                  // transform back to prepare for usage
+                  var intersectingPolygon = feature
+                    .getGeometry()
+                    .clone()
+                    .transform("EPSG:3857", "EPSG:4326");
+                  const fairwayCoordinates = calculateFairwayCoordinates(
+                    profileLine,
+                    intersectingPolygon,
+                    DEMODATA
+                  );
+                  this.$store.commit(
+                    "fairwayprofile/setFairwayCoordinates",
+                    fairwayCoordinates
+                  );
+                }
+              );
           })
           .then(() => {
             this.$store.commit("application/showSplitscreen", true);
@@ -206,33 +227,6 @@
             });
           });
       }
-    },
-    calculateIntersection(vectorSource, profileLine) {
-      const transformedLine = profileLine
-        .clone()
-        .transform("EPSG:4326", "EPSG:3857")
-        .getExtent();
-      const featureCallback = feature => {
-        // transform back to prepare for usage
-        var intersectingPolygon = feature
-          .getGeometry()
-          .clone()
-          .transform("EPSG:3857", "EPSG:4326");
-        const fairwayCoordinates = calculateFairwayCoordinates(
-          profileLine,
-          intersectingPolygon,
-          DEMODATA
-        );
-        this.$store.commit(
-          "fairwayprofile/setFairwayCoordinates",
-          fairwayCoordinates
-        );
-      };
-      vectorSource.forEachFeatureIntersectingExtent(
-        // need to use EPSG:3857 which is the proj of vectorSource
-        transformedLine,
-        featureCallback
-      );
     }
   },
   mounted() {
--- a/client/src/fairway/Fairwayprofile.vue	Wed Nov 14 07:29:51 2018 +0100
+++ b/client/src/fairway/Fairwayprofile.vue	Wed Nov 14 09:03:20 2018 +0100
@@ -43,6 +43,12 @@
                                 v-clipboard:success="onCopyCoordinates"
                                 class="btn btn-outline-secondary btn-sm mt-2">
                           Copy coordinates
+                        </button><br>
+                        <br>
+                        Enter coordinates
+                        <input class="form-control mt-2" placeholder="Lat,Lon,Lat,Lon" v-model="coordinatesInput" /><br>
+                        <button class="btn btn-sm btn-outline-secondary" @click="applyCoordinates">
+                          Apply
                         </button>
                     </small>
                 </div>
@@ -116,10 +122,15 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 import * as d3 from "d3";
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import { displayError, displayInfo } from "../application/lib/errors.js";
+import Feature from "ol/Feature";
+import LineString from "ol/geom/LineString";
+import { getLength } from "ol/sphere.js";
+import { calculateFairwayCoordinates } from "../application/lib/geo.js";
 
 const GROUND_COLOR = "#4A2F06";
+const DEMODATA = 2.5;
 
 export default {
   name: "fairwayprofile",
@@ -132,7 +143,14 @@
     "margin",
     "additionalSurveys"
   ],
+  data() {
+    return {
+      wait: false,
+      coordinatesInput: ""
+    };
+  },
   computed: {
+    ...mapGetters("map", ["getLayerByName"]),
     ...mapState("application", ["showSplitscreen"]),
     ...mapState("fairwayprofile", [
       "startPoint",
@@ -189,11 +207,6 @@
       );
     }
   },
-  data() {
-    return {
-      wait: false
-    };
-  },
   watch: {
     showSplitscreen() {
       this.drawDiagram();
@@ -465,6 +478,93 @@
         title: "Success",
         message: "Coordinates copied to clipboard!"
       });
+    },
+    applyCoordinates() {
+      if (this.coordinatesInput) {
+        const coordinates = this.coordinatesInput
+          .split(",")
+          .map(coord => parseFloat(coord.trim()));
+        if (coordinates.length === 4) {
+          // draw line on map
+          const cutLayer = this.getLayerByName("Cut Tool");
+          cutLayer.data.getSource().clear();
+          const cut = new Feature({
+            geometry: new LineString([
+              [coordinates[1], coordinates[0]],
+              [coordinates[3], coordinates[2]]
+            ]).transform("EPSG:4326", "EPSG:3857")
+          });
+          cutLayer.data.getSource().addFeature(cut);
+
+          // draw diagram
+          this.loadProfile(cut);
+        }
+      }
+    },
+    loadProfile(cut) {
+      // TODO: find central place for this logic, duplicated code from Drawtool.vue
+      const length = getLength(cut.getGeometry());
+      this.$store.commit("map/setCurrentMeasurement", {
+        quantity: "Length",
+        unitSymbol: "m",
+        value: Math.round(length * 10) / 10
+      });
+
+      // if a survey has been selected, request a profile
+      // TODO an improvement could be to check if the line intersects
+      // with the bottleneck area's polygon before trying the server request
+      if (this.selectedSurvey) {
+        this.$store.commit("fairwayprofile/clearCurrentProfile");
+        console.log("requesting profile for", this.selectedSurvey);
+        const inputLineString = cut.getGeometry().clone();
+        inputLineString.transform("EPSG:3857", "EPSG:4326");
+        const [start, end] = inputLineString
+          .getCoordinates()
+          .map(coords => coords.map(coord => parseFloat(coord.toFixed(8))));
+        this.$store.commit("fairwayprofile/setStartPoint", start);
+        this.$store.commit("fairwayprofile/setEndPoint", end);
+        const profileLine = new LineString([start, end]);
+        this.$store
+          .dispatch("fairwayprofile/loadProfile", this.selectedSurvey)
+          .then(() => {
+            this.getLayerByName("Fairway Dimensions")
+              .data.getSource()
+              .forEachFeatureIntersectingExtent(
+                // need to use EPSG:3857 which is the proj of vectorSource
+                profileLine
+                  .clone()
+                  .transform("EPSG:4326", "EPSG:3857")
+                  .getExtent(),
+                feature => {
+                  // transform back to prepare for usage
+                  var intersectingPolygon = feature
+                    .getGeometry()
+                    .clone()
+                    .transform("EPSG:3857", "EPSG:4326");
+                  const fairwayCoordinates = calculateFairwayCoordinates(
+                    profileLine,
+                    intersectingPolygon,
+                    DEMODATA
+                  );
+                  this.$store.commit(
+                    "fairwayprofile/setFairwayCoordinates",
+                    fairwayCoordinates
+                  );
+                }
+              );
+          })
+          .then(() => {
+            this.$store.commit("application/showSplitscreen", true);
+          })
+          .catch(error => {
+            console.log(error);
+            const { status, data } = error.response;
+            displayError({
+              title: "Backend Error",
+              message: `${status}: ${data.message || data}`
+            });
+          });
+      }
     }
   },
   mounted() {