Mercurial > gemma
view client/src/components/map/toolbar/Polygontool.vue @ 1279:60e15c2d26a2
licensing info updated
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 22 Nov 2018 09:50:13 +0100 |
parents | bc55ffaeb639 |
children | 99c039e86624 |
line wrap: on
line source
<template> <div @click="togglePolygonTool" class="toolbar-button"> <i :class="['fa fa-edit', {inverted: polygonTool && polygonTool.getActive()}]"></i> </div> </template> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState, mapGetters } from "vuex"; import { getArea } from "ol/sphere.js"; import Draw from "ol/interaction/Draw.js"; export default { name: "polygontool", computed: { ...mapGetters("map", ["getLayerByName"]), ...mapState("map", ["lineTool", "polygonTool", "cutTool", "openLayersMap"]) }, methods: { togglePolygonTool() { this.polygonTool.setActive(!this.polygonTool.getActive()); this.lineTool.setActive(false); this.cutTool.setActive(false); this.$store.commit("map/setCurrentMeasurement", null); this.getLayerByName("Draw Tool") .data.getSource() .clear(); }, polygonEnd(event) { const areaSize = getArea(event.feature.getGeometry()); this.$store.commit("map/setCurrentMeasurement", { quantity: "Area", unitSymbol: areaSize > 100000 ? "km²" : "m²", value: areaSize > 100000 ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m² : Math.round(areaSize) }); this.$store.commit("application/showIdentify", true); } }, created() { if (!this.polygonTool) { const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource(); const polygonTool = new Draw({ source: drawVectorSrc, type: "Polygon", maxPoints: 50 }); polygonTool.setActive(false); polygonTool.on("drawstart", () => { drawVectorSrc.clear(); this.$store.commit("map/setCurrentMeasurement", null); }); polygonTool.on("drawend", this.polygonEnd); this.$store.commit("map/polygonTool", polygonTool); this.openLayersMap.addInteraction(polygonTool); } } }; </script>