Mercurial > gemma

annotate client/src/drawtool/Drawtool.vue @ 1144:5f98d0c9d738

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
linted code
author Markus Kottlaender <markus@intevation.de>
date Mon, 12 Nov 2018 15:12:04 +0100
parents 2e06bc53b002
children 16d42e8183b3
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"]),
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
59 ...mapState("map", [
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
60 "drawMode",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
61 "drawTool",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
62 "cutMode",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
63 "cutTool",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
64 "openLayersMap"
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
65 ]),
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 ...mapState("bottlenecks", ["selectedSurvey"])
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 methods: {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 toggleLineMode() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 this.disableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 this.disableCutTool();
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
72 this.$store.commit(
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
73 "map/drawMode",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
74 this.drawMode !== "LineString" ? "LineString" : null
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
75 );
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 this.$store.commit("map/cutMode", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 if (this.drawMode) this.enableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 togglePolygonMode() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 this.disableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 this.disableCutTool();
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
82 this.$store.commit(
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
83 "map/drawMode",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
84 this.drawMode !== "Polygon" ? "Polygon" : null
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
85 );
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 this.$store.commit("map/cutMode", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 if (this.drawMode) this.enableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 toggleCutMode() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 this.disableCutTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 this.disableDrawTool();
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
92 this.$store.commit("map/cutMode", !this.cutMode);
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 this.$store.commit("map/drawMode", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 if (this.cutMode) this.enableCutTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 enableDrawTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 drawVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 const drawTool = new Draw({
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 source: drawVectorSrc,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 type: this.drawMode,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 maxPoints: this.drawMode === "LineString" ? 2 : 50
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 drawTool.on("drawstart", () => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 drawVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 this.$store.commit("map/setCurrentMeasurement", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 // 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
108 // pick it up
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 // 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
110 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 drawTool.on("drawend", this.drawEnd);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112 this.$store.commit("map/drawTool", drawTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
113 this.openLayersMap.addInteraction(drawTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 disableDrawTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 this.$store.commit("map/setCurrentMeasurement", null);
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
117 this.getLayerByName("Draw Tool")
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
118 .data.getSource()
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
119 .clear();
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120 this.openLayersMap.removeInteraction(this.drawTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 this.$store.commit("map/drawTool", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 drawEnd(event) {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 if (this.drawMode === "Polygon") {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 const areaSize = getArea(event.feature.getGeometry());
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 // 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
127 // so identify will show it
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 this.$store.commit("map/setCurrentMeasurement", {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129 quantity: "Area",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
130 unitSymbol: areaSize > 100000 ? "km²" : "m²",
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
131 value:
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
132 areaSize > 100000
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
133 ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m²
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
134 : Math.round(areaSize)
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 }
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
137 if (this.drawMode === "LineString") {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 const length = getLength(event.feature.getGeometry());
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 this.$store.commit("map/setCurrentMeasurement", {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140 quantity: "Length",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 unitSymbol: "m",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
142 value: Math.round(length * 10) / 10
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
143 });
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 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
146 enableCutTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
147 const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
148 cutVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
149 const cutTool = new Draw({
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
150 source: cutVectorSrc,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
151 type: "LineString",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
152 maxPoints: 2
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
153 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
154 cutTool.on("drawstart", () => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
155 cutVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
156 // 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
157 // pick it up
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
158 // 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
159 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 cutTool.on("drawend", this.cutEnd);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
161 this.$store.commit("map/cutTool", cutTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
162 this.openLayersMap.addInteraction(cutTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
163 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
164 disableCutTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
165 this.$store.commit("map/setCurrentMeasurement", null);
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
166 this.getLayerByName("Cut Tool")
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
167 .data.getSource()
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
168 .clear();
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169 this.openLayersMap.removeInteraction(this.cutTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
170 this.$store.commit("map/cutTool", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
171 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
172 cutEnd(event) {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
173 const length = getLength(event.feature.getGeometry());
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
174 this.$store.commit("map/setCurrentMeasurement", {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
175 quantity: "Length",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176 unitSymbol: "m",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
177 value: Math.round(length * 10) / 10
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
178 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
179
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
180 // 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
181 // 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
182 // 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
183 if (this.selectedSurvey) {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
184 this.$store.commit("fairwayprofile/clearCurrentProfile");
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
185 console.log("requesting profile for", this.selectedSurvey);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
186 const inputLineString = event.feature.getGeometry().clone();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
187 inputLineString.transform("EPSG:3857", "EPSG:4326");
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
188 const [start, end] = inputLineString
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
189 .getCoordinates()
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
190 .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
191 this.$store.commit("fairwayprofile/setStartPoint", start);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
192 this.$store.commit("fairwayprofile/setEndPoint", end);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
193 const profileLine = new LineString([start, end]);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
194 this.$store
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
195 .dispatch("fairwayprofile/loadProfile", this.selectedSurvey)
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
196 .then(() => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
197 var vectorSource = this.getLayerByName(
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
198 "Fairway Dimensions"
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
199 ).data.getSource();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
200 this.calculateIntersection(vectorSource, profileLine);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
201 })
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
202 .then(() => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
203 this.$store.commit("application/showSplitscreen", true);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
204 })
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
205 .catch(error => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
206 const { status, data } = error.response;
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
207 displayError({
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
208 title: "Backend Error",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
209 message: `${status}: ${data.message || data}`
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
210 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
211 });
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 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
214 calculateIntersection(vectorSource, profileLine) {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
215 const transformedLine = profileLine
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
216 .clone()
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
217 .transform("EPSG:4326", "EPSG:3857")
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
218 .getExtent();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
219 const featureCallback = feature => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
220 // transform back to prepare for usage
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
221 var intersectingPolygon = feature
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
222 .getGeometry()
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
223 .clone()
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
224 .transform("EPSG:3857", "EPSG:4326");
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
225 const fairwayCoordinates = calculateFairwayCoordinates(
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
226 profileLine,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
227 intersectingPolygon,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
228 DEMODATA
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
229 );
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
230 this.$store.commit(
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
231 "fairwayprofile/setFairwayCoordinates",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
232 fairwayCoordinates
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
233 );
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
234 };
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
235 vectorSource.forEachFeatureIntersectingExtent(
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
236 // 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
237 transformedLine,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
238 featureCallback
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
239 );
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
240 }
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
241 }
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
242 };
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
243 </script>