Mercurial > gemma
changeset 793:073394629ec6
client: add measurement and improve identify
* Only display features that have an Id in the identify box, because
during the drawmode, after the first click, there is an additional
feature that has no Id. Probably this is the point.
* Add setting an Id to the feature that is drawn, which makes it show
up in the identify box.
* Add code to add the length of the drawn line to the store and a rounded
value to the feature property. This creates a simple measurement tool,
if the feature box is shown.
| author | Bernhard Reiter <bernhard@intevation.de> |
|---|---|
| date | Thu, 27 Sep 2018 10:02:39 +0200 |
| parents | ce23a4192788 |
| children | afe62d1ce01c |
| files | client/src/layers/Identify.vue client/src/map/Maplayer.vue client/src/map/store.js |
| diffstat | 3 files changed, 21 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/layers/Identify.vue Thu Sep 27 09:55:25 2018 +0200 +++ b/client/src/layers/Identify.vue Thu Sep 27 10:02:39 2018 +0200 @@ -13,10 +13,12 @@ <hr> <div class="d-flex flex-column"> <div v-for="feature of identifiedFeatures" :key="feature.getId()"> - {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}: - <small v-for="(value, key) in prepareProperties(feature)" :key="key"> - <div v-if="value">{{key}}:{{value}}</div> - </small> + <div v-if="feature.getId()"> + {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}: + <small v-for="(value, key) in prepareProperties(feature)" :key="key"> + <div v-if="value">{{key}}:{{value}}</div> + </small> + </div> </div> </div> </div>
--- a/client/src/map/Maplayer.vue Thu Sep 27 09:55:25 2018 +0200 +++ b/client/src/map/Maplayer.vue Thu Sep 27 10:02:39 2018 +0200 @@ -25,6 +25,7 @@ import Draw from "ol/interaction/Draw.js"; import { Vector as VectorLayer } from "ol/layer.js"; import { Vector as VectorSource } from "ol/source.js"; +import { getLength } from "ol/sphere.js"; import distance from "@turf/distance"; import { @@ -82,8 +83,10 @@ type: this.drawMode, maxPoints: 2 }); - draw.on("drawstart", () => { + draw.on("drawstart", event => { this.vectorSource.clear(); + this.$store.commit("mapstore/setCurrentMeasurement", null); + event.feature.setId("drawn.1"); // unique id for new feature }); draw.on("drawend", this.drawEnd); return draw; @@ -97,8 +100,13 @@ }); }, drawEnd(event) { + const length = getLength(event.feature.getGeometry()); + this.$store.commit("mapstore/setCurrentMeasurement", length); + // also place the a rounded length in a property, so identify can show it + event.feature.set("length", Math.round(length * 10) / 10); + + // prepare to send the first line seqment to the server as GeoJSON const inputLineString = event.feature.getGeometry().clone(); - // prepare to send the first line seqment to the server as GeoJSON inputLineString.transform("EPSG:3857", "EPSG:4326"); const [start, end] = inputLineString.getCoordinates(); this.$store.commit("fairwayprofile/setStartPoint", start);
--- a/client/src/map/store.js Thu Sep 27 09:55:25 2018 +0200 +++ b/client/src/map/store.js Thu Sep 27 10:02:39 2018 +0200 @@ -167,7 +167,8 @@ isVisible: true } ], - identifiedFeatures: [] + identifiedFeatures: [], + currentMeasurement: null }, getters: { layers: state => { @@ -187,6 +188,9 @@ }, setOpenLayersMap: (state, map) => { state.openLayersMap = map; + }, + setCurrentMeasurement: (state, measurement) => { + state.currentMeasurement = measurement; } } };