Mercurial > gemma
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);