Mercurial > gemma

comparison client/src/map/Maplayer.vue @ 709:35fd15711e9e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 badbc0207418
comparison
equal deleted inserted replaced
706:d47fa556a3e8 709:35fd15711e9e
12 } 12 }
13 </style> 13 </style>
14 14
15 <script> 15 <script>
16 import { HTTP } from "../application/lib/http"; 16 import { HTTP } from "../application/lib/http";
17 import { mapGetters } from "vuex";
17 import "ol/ol.css"; 18 import "ol/ol.css";
19 // openlayers imports, sorted by module name
18 import { Map, View } from "ol"; 20 import { Map, View } from "ol";
21 import Feature from "ol/Feature";
19 import { bbox as bboxFilter } from "ol/format/filter.js"; 22 import { bbox as bboxFilter } from "ol/format/filter.js";
20 import { WFS, GeoJSON } from "ol/format.js"; 23 import { WFS, GeoJSON } from "ol/format.js";
21 import { mapGetters } from "vuex"; 24 import GeometryType from "ol/geom/GeometryType.js";
25 import LineString from "ol/geom/LineString.js";
22 import Draw from "ol/interaction/Draw.js"; 26 import Draw from "ol/interaction/Draw.js";
27 import { Vector as VectorLayer } from "ol/layer.js";
23 import { Vector as VectorSource } from "ol/source.js"; 28 import { Vector as VectorSource } from "ol/source.js";
24 import { Vector as VectorLayer } from "ol/layer.js";
25 29
26 export default { 30 export default {
27 name: "maplayer", 31 name: "maplayer",
28 props: ["drawMode", "lat", "long", "zoom", "split"], 32 props: ["drawMode", "lat", "long", "zoom", "split"],
29 data() { 33 data() {
63 this.openLayersMap.removeInteraction(this.interaction); 67 this.openLayersMap.removeInteraction(this.interaction);
64 this.interaction = null; 68 this.interaction = null;
65 }, 69 },
66 createInteraction() { 70 createInteraction() {
67 var that = this; 71 var that = this;
68 this.vectorSource.clear(); // start empty 72 this.vectorSource.clear(); // start empty
69 var draw = new Draw({ 73 var draw = new Draw({
70 source: this.vectorSource, 74 source: this.vectorSource,
71 type: this.drawMode 75 type: this.drawMode
72 }); 76 });
73 draw.on("drawstart", function(event) { 77 draw.on("drawstart", function(event) {
74 console.log(event); 78 console.log(event);
75 that.vectorSource.clear(); // remove old features when draw starts 79 that.vectorSource.clear(); // remove old features when draw starts
76 }); 80 });
77 draw.on("drawend", this.drawEnd); 81 draw.on("drawend", this.drawEnd);
78 return draw; 82 return draw;
79 }, 83 },
80 drawEnd(event) { 84 drawEnd(event) {
81 console.log(event); 85 console.log(event);
86 var inputLineString = event.feature.getGeometry().clone();
87 if (inputLineString.getType() == GeometryType.LINE_STRING) {
88 // prepare to send the first line seqment to the server as GeoJSON
89 inputLineString.transform("EPSG:3857", "EPSG:4326");
90 var coords = inputLineString.getCoordinates();
91 console.log(coords);
92 if (coords.length >= 2) {
93 var feature = new Feature({
94 geometry: new LineString([coords[0], coords[1]]),
95 geometryName: "geometry"
96 });
97 var g = new GeoJSON({geometryName:"geometry"}).writeFeature(feature);
98 console.log(g);
99 }
100 }
82 }, 101 },
83 activateInteraction() { 102 activateInteraction() {
84 const interaction = this.createInteraction(this.drawMode); 103 const interaction = this.createInteraction(this.drawMode);
85 this.interaction = interaction; 104 this.interaction = interaction;
86 this.openLayersMap.addInteraction(interaction); 105 this.openLayersMap.addInteraction(interaction);