changeset 709:35fd15711e9e

client: prepare to send profile cut to backend * Check for an pick the first two coordinates of the digitised linestring and prepare to write them out as GeoJSON. * Sort imports in Maplayer.vue.
author Bernhard Reiter <bernhard@intevation.de>
date Fri, 21 Sep 2018 12:26:39 +0200
parents d47fa556a3e8
children 3e9f0070c33e
files client/src/map/Maplayer.vue
diffstat 1 files changed, 23 insertions(+), 4 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/map/Maplayer.vue	Fri Sep 21 10:53:14 2018 +0200
+++ b/client/src/map/Maplayer.vue	Fri Sep 21 12:26:39 2018 +0200
@@ -14,14 +14,18 @@
 
 <script>
 import { HTTP } from "../application/lib/http";
+import { mapGetters } from "vuex";
 import "ol/ol.css";
+// openlayers imports, sorted by module name
 import { Map, View } from "ol";
+import Feature from "ol/Feature";
 import { bbox as bboxFilter } from "ol/format/filter.js";
 import { WFS, GeoJSON } from "ol/format.js";
-import { mapGetters } from "vuex";
+import GeometryType from "ol/geom/GeometryType.js";
+import LineString from "ol/geom/LineString.js";
 import Draw from "ol/interaction/Draw.js";
+import { Vector as VectorLayer } from "ol/layer.js";
 import { Vector as VectorSource } from "ol/source.js";
-import { Vector as VectorLayer } from "ol/layer.js";
 
 export default {
   name: "maplayer",
@@ -65,20 +69,35 @@
     },
     createInteraction() {
       var that = this;
-      this.vectorSource.clear();  // start empty
+      this.vectorSource.clear(); // start empty
       var draw = new Draw({
         source: this.vectorSource,
         type: this.drawMode
       });
       draw.on("drawstart", function(event) {
         console.log(event);
-        that.vectorSource.clear();  // remove old features when draw starts
+        that.vectorSource.clear(); // remove old features when draw starts
       });
       draw.on("drawend", this.drawEnd);
       return draw;
     },
     drawEnd(event) {
       console.log(event);
+      var inputLineString = event.feature.getGeometry().clone();
+      if (inputLineString.getType() == GeometryType.LINE_STRING) {
+        // prepare to send the first line seqment to the server as GeoJSON
+        inputLineString.transform("EPSG:3857", "EPSG:4326");
+        var coords = inputLineString.getCoordinates();
+        console.log(coords);
+        if (coords.length >= 2) {
+          var feature = new Feature({
+            geometry: new LineString([coords[0], coords[1]]),
+            geometryName: "geometry"
+          });
+          var g = new GeoJSON({geometryName:"geometry"}).writeFeature(feature);
+          console.log(g);
+        }
+      }
     },
     activateInteraction() {
       const interaction = this.createInteraction(this.drawMode);