Mercurial > gemma
view client/src/drawtool/Drawtool.vue @ 1165:a44ac5193b38
fixed code duplication
moved logic to create cross profile into fairway store
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 14 Nov 2018 11:14:58 +0100 |
parents | dc99decbf9e3 |
children | 0d17e66ad7a4 |
line wrap: on
line source
<template> <div class="d-flex flex-column"> <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool"> <i :class="['fa fa-pencil', {inverted: drawMode === 'LineString'}]"></i> </div> <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool"> <i :class="['fa fa-edit', {inverted: drawMode === 'Polygon'}]"></i> </div> <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool" v-if="selectedSurvey"> <i :class="['fa fa-area-chart', {inverted: cutMode}]"></i> </div> </div> </template> <style lang="sass" scoped> .drawtool background-color: white padding: $small-offset border-radius: $border-radius margin-left: $offset height: $icon-width width: $icon-height margin-bottom: $offset margin-right: $offset z-index: 2 .inverted color: #0077ff </style> <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): * Thomas Junk <thomas.junk@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState, mapGetters } from "vuex"; import { getLength, getArea } from "ol/sphere.js"; import Draw from "ol/interaction/Draw.js"; export default { name: "drawtool", computed: { ...mapGetters("map", ["getLayerByName"]), ...mapState("map", [ "drawMode", "drawTool", "cutMode", "cutTool", "openLayersMap" ]), ...mapState("bottlenecks", ["selectedSurvey"]) }, methods: { toggleLineMode() { this.disableDrawTool(); this.disableCutTool(); this.$store.commit( "map/drawMode", this.drawMode !== "LineString" ? "LineString" : null ); this.$store.commit("map/cutMode", null); if (this.drawMode) this.enableDrawTool(); }, togglePolygonMode() { this.disableDrawTool(); this.disableCutTool(); this.$store.commit( "map/drawMode", this.drawMode !== "Polygon" ? "Polygon" : null ); this.$store.commit("map/cutMode", null); if (this.drawMode) this.enableDrawTool(); }, toggleCutMode() { this.disableCutTool(); this.disableDrawTool(); this.$store.commit("map/cutMode", !this.cutMode); this.$store.commit("map/drawMode", null); if (this.cutMode) this.enableCutTool(); }, enableDrawTool() { const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource(); drawVectorSrc.clear(); const drawTool = new Draw({ source: drawVectorSrc, type: this.drawMode, maxPoints: this.drawMode === "LineString" ? 2 : 50 }); drawTool.on("drawstart", () => { drawVectorSrc.clear(); this.$store.commit("map/setCurrentMeasurement", null); // we are not setting an id here, to avoid the regular identify to // pick it up // event.feature.setId("drawn.1"); // unique id for new feature }); drawTool.on("drawend", this.drawEnd); this.$store.commit("map/drawTool", drawTool); this.openLayersMap.addInteraction(drawTool); }, disableDrawTool() { this.$store.commit("map/setCurrentMeasurement", null); this.getLayerByName("Draw Tool") .data.getSource() .clear(); this.openLayersMap.removeInteraction(this.drawTool); this.$store.commit("map/drawTool", null); }, drawEnd(event) { if (this.drawMode === "Polygon") { const areaSize = getArea(event.feature.getGeometry()); // also place the a rounded areaSize in a property, // so identify will show it 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) }); } if (this.drawMode === "LineString") { const length = getLength(event.feature.getGeometry()); this.$store.commit("map/setCurrentMeasurement", { quantity: "Length", unitSymbol: "m", value: Math.round(length * 10) / 10 }); } }, enableCutTool() { const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource(); const cutTool = new Draw({ source: cutVectorSrc, type: "LineString", maxPoints: 2 }); cutTool.on("drawstart", () => { cutVectorSrc.clear(); // we are not setting an id here, to avoid the regular identify to // pick it up // event.feature.setId("drawn.1"); // unique id for new feature }); cutTool.on("drawend", this.cutEnd); this.$store.commit("map/cutTool", cutTool); this.openLayersMap.addInteraction(cutTool); }, disableCutTool() { this.$store.commit("map/setCurrentMeasurement", null); this.openLayersMap.removeInteraction(this.cutTool); this.$store.commit("map/cutTool", null); }, cutEnd(event) { this.$store.dispatch("fairwayprofile/cut", event.feature); } }, mounted() { window.addEventListener("keydown", e => { // Escape if (e.keyCode === 27) { this.$store.commit("map/drawMode", null); this.$store.commit("map/cutMode", false); this.disableDrawTool(); this.disableCutTool(); } }); } }; </script>