Mercurial > gemma

annotate client/src/components/map/toolbar/Polygontool.vue @ 1279:60e15c2d26a2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
licensing info updated
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 22 Nov 2018 09:50:13 +0100
parents bc55ffaeb639
children 99c039e86624
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <div @click="togglePolygonTool" class="toolbar-button">
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 <i :class="['fa fa-edit', {inverted: polygonTool && polygonTool.getActive()}]"></i>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 </div>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 </template>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 <script>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 /* This is Free Software under GNU Affero General Public License v >= 3.0
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 * without warranty, see README.md and license for details.
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 *
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 * SPDX-License-Identifier: AGPL-3.0-or-later
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 * License-Filename: LICENSES/AGPL-3.0.txt
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 *
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 * Copyright (C) 2018 by via donau
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 * – Österreichische Wasserstraßen-Gesellschaft mbH
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 * Software engineering by Intevation GmbH
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 *
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 * Author(s):
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 * Markus Kottländer <markus.kottlaender@intevation.de>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 */
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 import { mapState, mapGetters } from "vuex";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 import { getArea } from "ol/sphere.js";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 import Draw from "ol/interaction/Draw.js";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 export default {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 name: "polygontool",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 computed: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 ...mapGetters("map", ["getLayerByName"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 ...mapState("map", ["lineTool", "polygonTool", "cutTool", "openLayersMap"])
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 methods: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 togglePolygonTool() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 this.polygonTool.setActive(!this.polygonTool.getActive());
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 this.lineTool.setActive(false);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 this.cutTool.setActive(false);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 this.$store.commit("map/setCurrentMeasurement", null);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 this.getLayerByName("Draw Tool")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 .data.getSource()
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 .clear();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 polygonEnd(event) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 const areaSize = getArea(event.feature.getGeometry());
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 this.$store.commit("map/setCurrentMeasurement", {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 quantity: "Area",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 unitSymbol: areaSize > 100000 ? "km²" : "m²",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 value:
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 areaSize > 100000
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m²
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 : Math.round(areaSize)
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 this.$store.commit("application/showIdentify", true);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 created() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 if (!this.polygonTool) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 const polygonTool = new Draw({
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 source: drawVectorSrc,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 type: "Polygon",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 maxPoints: 50
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 polygonTool.setActive(false);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 polygonTool.on("drawstart", () => {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 drawVectorSrc.clear();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 this.$store.commit("map/setCurrentMeasurement", null);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 polygonTool.on("drawend", this.polygonEnd);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 this.$store.commit("map/polygonTool", polygonTool);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 this.openLayersMap.addInteraction(polygonTool);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 </script>