Mercurial > gemma
annotate client/src/drawtool/Drawtool.vue @ 1237:74562dc29e10
refactored drawtool
The map interactions (ol/interaction/Draw) were previously always removed and re-created.
Now there are created and added to the map once and their active flag is used to toggle the tools.
Results in cleaner code and easier separation of the buttons in the future.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 20 Nov 2018 13:03:24 +0100 |
parents | ba8cd80d68b6 |
children | 442399fc1b71 |
rev | line source |
---|---|
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
1154
0330a5a8480e
removed test code
Markus Kottlaender <markus@intevation.de>
parents:
1153
diff
changeset
|
2 <div class="d-flex flex-column"> |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
3 <div @click="toggleLineTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded"> |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
4 <i :class="['fa fa-pencil', {inverted: lineTool && lineTool.getActive()}]"></i> |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
5 </div> |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
6 <div @click="togglePolygonTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded"> |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
7 <i :class="['fa fa-edit', {inverted: polygonTool && polygonTool.getActive()}]"></i> |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
8 </div> |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
9 <div @click="toggleCutTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey"> |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
10 <i :class="['fa fa-area-chart', {inverted: cutTool && cutTool.getActive()}]"></i> |
1140
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 height: $icon-width |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
18 width: $icon-height |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 z-index: 2 |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 .inverted |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 color: #0077ff |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 </style> |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
25 <script> |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 /* 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
|
27 * 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
|
28 * |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 * SPDX-License-Identifier: AGPL-3.0-or-later |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 * License-Filename: LICENSES/AGPL-3.0.txt |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 * |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 * Copyright (C) 2018 by via donau |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 * – Österreichische Wasserstraßen-Gesellschaft mbH |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 * Software engineering by Intevation GmbH |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 * |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 * Author(s): |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 * Thomas Junk <thomas.junk@intevation.de> |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 * Markus Kottländer <markus.kottlaender@intevation.de> |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 */ |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 import { mapState, mapGetters } from "vuex"; |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 import { getLength, getArea } from "ol/sphere.js"; |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 import Draw from "ol/interaction/Draw.js"; |
1197
49740dcba52c
changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents:
1175
diff
changeset
|
43 import { Stroke, Style, Circle, Fill } from "ol/style.js"; |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 export default { |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 name: "drawtool", |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 computed: { |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 ...mapGetters("map", ["getLayerByName"]), |
1144 | 49 ...mapState("map", [ |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
50 "lineTool", |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
51 "polygonTool", |
1144 | 52 "cutTool", |
53 "openLayersMap" | |
54 ]), | |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 ...mapState("bottlenecks", ["selectedSurvey"]) |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 }, |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 methods: { |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
58 toggleLineTool() { |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
59 this.lineTool.setActive(!this.lineTool.getActive()); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
60 this.polygonTool.setActive(false); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
61 this.cutTool.setActive(false); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
62 this.$store.commit("map/setCurrentMeasurement", null); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
63 this.getLayerByName("Draw Tool").data.getSource().clear(); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
64 }, |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
65 togglePolygonTool() { |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
66 this.polygonTool.setActive(!this.polygonTool.getActive()); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
67 this.lineTool.setActive(false); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
68 this.cutTool.setActive(false); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
69 this.$store.commit("map/setCurrentMeasurement", null); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
70 this.getLayerByName("Draw Tool").data.getSource().clear(); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
71 }, |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
72 toggleCutTool() { |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
73 this.cutTool.setActive(!this.cutTool.getActive()); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
74 this.lineTool.setActive(false); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
75 this.polygonTool.setActive(false); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
76 this.$store.commit("map/setCurrentMeasurement", null); |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 }, |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
78 lineEnd(event) { |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
79 const length = getLength(event.feature.getGeometry()); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
80 this.$store.commit("map/setCurrentMeasurement", { |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
81 quantity: "Length", |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
82 unitSymbol: "m", |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
83 value: Math.round(length * 10) / 10 |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
84 }); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
85 this.$store.commit("application/showIdentify", true); |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 }, |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
87 polygonEnd(event) { |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
88 const areaSize = getArea(event.feature.getGeometry()); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
89 this.$store.commit("map/setCurrentMeasurement", { |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
90 quantity: "Area", |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
91 unitSymbol: areaSize > 100000 ? "km²" : "m²", |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
92 value: |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
93 areaSize > 100000 |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
94 // convert into 1 km² == 1000*1000 m² and round to 1000 m² |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
95 ? Math.round(areaSize / 1000) / 1000 |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
96 : Math.round(areaSize) |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
97 }); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
98 this.$store.commit("application/showIdentify", true); |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
99 }, |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
100 cutEnd(event) { |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
101 this.$store.dispatch("fairwayprofile/cut", event.feature); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
102 } |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
103 }, |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
104 created() { |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
105 if (!this.lineTool) { |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource(); |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
107 const lineTool = new Draw({ |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 source: drawVectorSrc, |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
109 type: "LineString", |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
110 maxPoints: 2 |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 }); |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
112 lineTool.setActive(false); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
113 lineTool.on("drawstart", () => { |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
114 drawVectorSrc.clear(); |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 this.$store.commit("map/setCurrentMeasurement", null); |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 }); |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
117 lineTool.on("drawend", this.lineEnd); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
118 this.$store.commit("map/lineTool", lineTool); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
119 this.openLayersMap.addInteraction(lineTool); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
120 } |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
121 |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
122 if (!this.polygonTool) { |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
123 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource(); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
124 const polygonTool = new Draw({ |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
125 source: drawVectorSrc, |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
126 type: "Polygon", |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
127 maxPoints: 50 |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
128 }); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
129 polygonTool.setActive(false); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
130 polygonTool.on("drawstart", () => { |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
131 drawVectorSrc.clear(); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
132 this.$store.commit("map/setCurrentMeasurement", null); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
133 }); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
134 polygonTool.on("drawend", this.polygonEnd); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
135 this.$store.commit("map/polygonTool", polygonTool); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
136 this.openLayersMap.addInteraction(polygonTool); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
137 } |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
138 |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
139 if (!this.cutTool) { |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
140 const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource(); |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
141 const cutTool = new Draw({ |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
142 source: cutVectorSrc, |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
143 type: "LineString", |
1197
49740dcba52c
changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents:
1175
diff
changeset
|
144 maxPoints: 2, |
49740dcba52c
changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents:
1175
diff
changeset
|
145 style: new Style({ |
49740dcba52c
changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents:
1175
diff
changeset
|
146 stroke: new Stroke({ |
49740dcba52c
changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents:
1175
diff
changeset
|
147 color: "#444", |
49740dcba52c
changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents:
1175
diff
changeset
|
148 width: 2, |
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1197
diff
changeset
|
149 lineDash: [7, 7] |
1197
49740dcba52c
changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents:
1175
diff
changeset
|
150 }), |
49740dcba52c
changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents:
1175
diff
changeset
|
151 image: new Circle({ |
49740dcba52c
changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents:
1175
diff
changeset
|
152 fill: new Fill({ color: "#333" }), |
49740dcba52c
changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents:
1175
diff
changeset
|
153 stroke: new Stroke({ color: "#fff", width: 1.5 }), |
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1197
diff
changeset
|
154 radius: 6 |
1197
49740dcba52c
changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents:
1175
diff
changeset
|
155 }) |
49740dcba52c
changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents:
1175
diff
changeset
|
156 }) |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
157 }); |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
158 cutTool.setActive(false); |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
159 cutTool.on("drawstart", () => { |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
160 cutVectorSrc.clear(); |
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 cutTool.on("drawend", this.cutEnd); |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
163 this.$store.commit("map/cutTool", cutTool); |
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
164 this.openLayersMap.addInteraction(cutTool); |
1144 | 165 } |
1153
16d42e8183b3
cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents:
1144
diff
changeset
|
166 }, |
16d42e8183b3
cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents:
1144
diff
changeset
|
167 mounted() { |
1156 | 168 window.addEventListener("keydown", e => { |
1153
16d42e8183b3
cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents:
1144
diff
changeset
|
169 // Escape |
16d42e8183b3
cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents:
1144
diff
changeset
|
170 if (e.keyCode === 27) { |
1237
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
171 this.lineTool.setActive(false); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
172 this.polygonTool.setActive(false); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
173 this.cutTool.setActive(false); |
74562dc29e10
refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
174 this.getLayerByName("Draw Tool").data.getSource().clear(); |
1153
16d42e8183b3
cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents:
1144
diff
changeset
|
175 } |
16d42e8183b3
cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents:
1144
diff
changeset
|
176 }); |
1140
2e06bc53b002
separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
177 } |
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 </script> |