Mercurial > gemma

annotate client/src/drawtool/Drawtool.vue @ 1140:2e06bc53b002

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
separating line/polygon/cut tools in UI Measurements can now be made while a bottleneck and sounding data is selected. The open layers interaction object(s) are now in the vuex store to disable them from other components (Morphtool.vue). Line and Polygon are now to separate buttons.
author Markus Kottlaender <markus@intevation.de>
date Mon, 12 Nov 2018 14:45:07 +0100
parents
children 5f98d0c9d738
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <div class="d-flex flex-column">
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool">
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 <i :class="['fa fa-pencil', {inverted: drawMode === 'LineString'}]"></i>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 </div>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool">
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 <i :class="['fa fa-edit', {inverted: drawMode === 'Polygon'}]"></i>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 </div>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool" v-if="selectedSurvey">
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 <i :class="['fa fa-area-chart', {inverted: cutMode}]"></i>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 </div>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 </div>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 </template>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 <style lang="sass" scoped>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 .drawtool
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 background-color: white
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 padding: $small-offset
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 border-radius: $border-radius
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 margin-left: $offset
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 height: $icon-width
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 width: $icon-height
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 margin-bottom: $offset
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 margin-right: $offset
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 z-index: 2
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 .inverted
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 color: #0077ff
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 </style>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 <script>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 /* This is Free Software under GNU Affero General Public License v >= 3.0
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 * without warranty, see README.md and license for details.
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 *
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 * SPDX-License-Identifier: AGPL-3.0-or-later
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 * License-Filename: LICENSES/AGPL-3.0.txt
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 *
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 * Copyright (C) 2018 by via donau
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 * – Österreichische Wasserstraßen-Gesellschaft mbH
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 * Software engineering by Intevation GmbH
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 *
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 * Author(s):
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 * Thomas Junk <thomas.junk@intevation.de>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 * Markus Kottländer <markus.kottlaender@intevation.de>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 */
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 import { mapState, mapGetters } from "vuex";
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 import { getLength, getArea } from "ol/sphere.js";
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 import LineString from "ol/geom/LineString.js";
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 import Draw from "ol/interaction/Draw.js";
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 import { displayError } from "../application/lib/errors.js";
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 import { calculateFairwayCoordinates } from "../application/lib/geo.js";
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 const DEMODATA = 2.5;
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 export default {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 name: "drawtool",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 computed: {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 ...mapGetters("map", ["getLayerByName"]),
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 ...mapState("map", ["drawMode", "drawTool", "cutMode", "cutTool", "openLayersMap"]),
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 ...mapState("bottlenecks", ["selectedSurvey"])
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 methods: {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 toggleLineMode() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 this.disableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 this.disableCutTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 this.$store.commit("map/drawMode", this.drawMode !== "LineString" ? "LineString" : null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 this.$store.commit("map/cutMode", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 if (this.drawMode) this.enableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 togglePolygonMode() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 this.disableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 this.disableCutTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 this.$store.commit("map/drawMode", this.drawMode !== "Polygon" ? "Polygon" : null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 this.$store.commit("map/cutMode", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 if (this.drawMode) this.enableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 toggleCutMode() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 this.disableCutTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 this.disableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 this.$store.commit('map/cutMode', !this.cutMode);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 this.$store.commit("map/drawMode", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 if (this.cutMode) this.enableCutTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 enableDrawTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 drawVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 const drawTool = new Draw({
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 source: drawVectorSrc,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 type: this.drawMode,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 maxPoints: this.drawMode === "LineString" ? 2 : 50
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 drawTool.on("drawstart", () => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 drawVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 this.$store.commit("map/setCurrentMeasurement", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 // we are not setting an id here, to avoid the regular identify to
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 // pick it up
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 // event.feature.setId("drawn.1"); // unique id for new feature
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 drawTool.on("drawend", this.drawEnd);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 this.$store.commit("map/drawTool", drawTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 this.openLayersMap.addInteraction(drawTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 disableDrawTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 this.$store.commit("map/setCurrentMeasurement", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 this.getLayerByName("Draw Tool").data.getSource().clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 this.openLayersMap.removeInteraction(this.drawTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 this.$store.commit("map/drawTool", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 drawEnd(event) {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
110 if (this.drawMode === "Polygon") {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 const areaSize = getArea(event.feature.getGeometry());
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112 // also place the a rounded areaSize in a property,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
113 // so identify will show it
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 this.$store.commit("map/setCurrentMeasurement", {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 quantity: "Area",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 unitSymbol: areaSize > 100000 ? "km²" : "m²",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
117 value: areaSize > 100000
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118 ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m²
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 : Math.round(areaSize)
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 }
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 if (this.drawMode === "LineString") {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 const length = getLength(event.feature.getGeometry());
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 this.$store.commit("map/setCurrentMeasurement", {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 quantity: "Length",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 unitSymbol: "m",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 value: Math.round(length * 10) / 10
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129 }
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
130 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
131 enableCutTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
132 const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
133 cutVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 const cutTool = new Draw({
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 source: cutVectorSrc,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 type: "LineString",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
137 maxPoints: 2
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 cutTool.on("drawstart", () => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140 cutVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 // we are not setting an id here, to avoid the regular identify to
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
142 // pick it up
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
143 // event.feature.setId("drawn.1"); // unique id for new feature
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
144 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
145 cutTool.on("drawend", this.cutEnd);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
146 this.$store.commit("map/cutTool", cutTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
147 this.openLayersMap.addInteraction(cutTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
148 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
149 disableCutTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
150 this.$store.commit("map/setCurrentMeasurement", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
151 this.getLayerByName("Cut Tool").data.getSource().clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
152 this.openLayersMap.removeInteraction(this.cutTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
153 this.$store.commit("map/cutTool", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
154 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
155 cutEnd(event) {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
156 const length = getLength(event.feature.getGeometry());
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
157 this.$store.commit("map/setCurrentMeasurement", {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
158 quantity: "Length",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
159 unitSymbol: "m",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 value: Math.round(length * 10) / 10
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
161 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
162
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
163 // if a survey has been selected, request a profile
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
164 // TODO an improvement could be to check if the line intersects
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
165 // with the bottleneck area's polygon before trying the server request
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
166 if (this.selectedSurvey) {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
167 this.$store.commit("fairwayprofile/clearCurrentProfile");
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
168 console.log("requesting profile for", this.selectedSurvey);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169 const inputLineString = event.feature.getGeometry().clone();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
170 inputLineString.transform("EPSG:3857", "EPSG:4326");
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
171 const [start, end] = inputLineString
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
172 .getCoordinates()
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
173 .map(coords => coords.map(coord => parseFloat(coord.toFixed(8))));
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
174 this.$store.commit("fairwayprofile/setStartPoint", start);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
175 this.$store.commit("fairwayprofile/setEndPoint", end);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176 const profileLine = new LineString([start, end]);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
177 this.$store
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
178 .dispatch("fairwayprofile/loadProfile", this.selectedSurvey)
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
179 .then(() => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
180 var vectorSource = this.getLayerByName(
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
181 "Fairway Dimensions"
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
182 ).data.getSource();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
183 this.calculateIntersection(vectorSource, profileLine);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
184 })
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
185 .then(() => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
186 this.$store.commit("application/showSplitscreen", true);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
187 })
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
188 .catch(error => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
189 const { status, data } = error.response;
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
190 displayError({
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
191 title: "Backend Error",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
192 message: `${status}: ${data.message || data}`
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
193 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
194 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
195 }
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
196 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
197 calculateIntersection(vectorSource, profileLine) {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
198 const transformedLine = profileLine
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
199 .clone()
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
200 .transform("EPSG:4326", "EPSG:3857")
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
201 .getExtent();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
202 const featureCallback = feature => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
203 // transform back to prepare for usage
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
204 var intersectingPolygon = feature
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
205 .getGeometry()
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
206 .clone()
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
207 .transform("EPSG:3857", "EPSG:4326");
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
208 const fairwayCoordinates = calculateFairwayCoordinates(
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
209 profileLine,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
210 intersectingPolygon,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
211 DEMODATA
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
212 );
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
213 this.$store.commit(
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
214 "fairwayprofile/setFairwayCoordinates",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
215 fairwayCoordinates
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
216 );
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
217 };
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
218 vectorSource.forEachFeatureIntersectingExtent(
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
219 // need to use EPSG:3857 which is the proj of vectorSource
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
220 transformedLine,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
221 featureCallback
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
222 );
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
223 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
224 }
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
225 };
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
226 </script>