Mercurial > gemma

comparison 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
comparison
equal deleted inserted replaced
1143:846e336d8ee5 1144:5f98d0c9d738
54 54
55 export default { 55 export default {
56 name: "drawtool", 56 name: "drawtool",
57 computed: { 57 computed: {
58 ...mapGetters("map", ["getLayerByName"]), 58 ...mapGetters("map", ["getLayerByName"]),
59 ...mapState("map", ["drawMode", "drawTool", "cutMode", "cutTool", "openLayersMap"]), 59 ...mapState("map", [
60 "drawMode",
61 "drawTool",
62 "cutMode",
63 "cutTool",
64 "openLayersMap"
65 ]),
60 ...mapState("bottlenecks", ["selectedSurvey"]) 66 ...mapState("bottlenecks", ["selectedSurvey"])
61 }, 67 },
62 methods: { 68 methods: {
63 toggleLineMode() { 69 toggleLineMode() {
64 this.disableDrawTool(); 70 this.disableDrawTool();
65 this.disableCutTool(); 71 this.disableCutTool();
66 this.$store.commit("map/drawMode", this.drawMode !== "LineString" ? "LineString" : null); 72 this.$store.commit(
73 "map/drawMode",
74 this.drawMode !== "LineString" ? "LineString" : null
75 );
67 this.$store.commit("map/cutMode", null); 76 this.$store.commit("map/cutMode", null);
68 if (this.drawMode) this.enableDrawTool(); 77 if (this.drawMode) this.enableDrawTool();
69 }, 78 },
70 togglePolygonMode() { 79 togglePolygonMode() {
71 this.disableDrawTool(); 80 this.disableDrawTool();
72 this.disableCutTool(); 81 this.disableCutTool();
73 this.$store.commit("map/drawMode", this.drawMode !== "Polygon" ? "Polygon" : null); 82 this.$store.commit(
83 "map/drawMode",
84 this.drawMode !== "Polygon" ? "Polygon" : null
85 );
74 this.$store.commit("map/cutMode", null); 86 this.$store.commit("map/cutMode", null);
75 if (this.drawMode) this.enableDrawTool(); 87 if (this.drawMode) this.enableDrawTool();
76 }, 88 },
77 toggleCutMode() { 89 toggleCutMode() {
78 this.disableCutTool(); 90 this.disableCutTool();
79 this.disableDrawTool(); 91 this.disableDrawTool();
80 this.$store.commit('map/cutMode', !this.cutMode); 92 this.$store.commit("map/cutMode", !this.cutMode);
81 this.$store.commit("map/drawMode", null); 93 this.$store.commit("map/drawMode", null);
82 if (this.cutMode) this.enableCutTool(); 94 if (this.cutMode) this.enableCutTool();
83 }, 95 },
84 enableDrawTool() { 96 enableDrawTool() {
85 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource(); 97 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
100 this.$store.commit("map/drawTool", drawTool); 112 this.$store.commit("map/drawTool", drawTool);
101 this.openLayersMap.addInteraction(drawTool); 113 this.openLayersMap.addInteraction(drawTool);
102 }, 114 },
103 disableDrawTool() { 115 disableDrawTool() {
104 this.$store.commit("map/setCurrentMeasurement", null); 116 this.$store.commit("map/setCurrentMeasurement", null);
105 this.getLayerByName("Draw Tool").data.getSource().clear(); 117 this.getLayerByName("Draw Tool")
118 .data.getSource()
119 .clear();
106 this.openLayersMap.removeInteraction(this.drawTool); 120 this.openLayersMap.removeInteraction(this.drawTool);
107 this.$store.commit("map/drawTool", null); 121 this.$store.commit("map/drawTool", null);
108 }, 122 },
109 drawEnd(event) { 123 drawEnd(event) {
110 if (this.drawMode === "Polygon") { 124 if (this.drawMode === "Polygon") {
112 // also place the a rounded areaSize in a property, 126 // also place the a rounded areaSize in a property,
113 // so identify will show it 127 // so identify will show it
114 this.$store.commit("map/setCurrentMeasurement", { 128 this.$store.commit("map/setCurrentMeasurement", {
115 quantity: "Area", 129 quantity: "Area",
116 unitSymbol: areaSize > 100000 ? "km²" : "m²", 130 unitSymbol: areaSize > 100000 ? "km²" : "m²",
117 value: areaSize > 100000 131 value:
118 ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m² 132 areaSize > 100000
119 : Math.round(areaSize) 133 ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m²
134 : Math.round(areaSize)
120 }); 135 });
121 } 136 }
122 if (this.drawMode === "LineString") { 137 if (this.drawMode === "LineString") {
123 const length = getLength(event.feature.getGeometry()); 138 const length = getLength(event.feature.getGeometry());
124 this.$store.commit("map/setCurrentMeasurement", { 139 this.$store.commit("map/setCurrentMeasurement", {
146 this.$store.commit("map/cutTool", cutTool); 161 this.$store.commit("map/cutTool", cutTool);
147 this.openLayersMap.addInteraction(cutTool); 162 this.openLayersMap.addInteraction(cutTool);
148 }, 163 },
149 disableCutTool() { 164 disableCutTool() {
150 this.$store.commit("map/setCurrentMeasurement", null); 165 this.$store.commit("map/setCurrentMeasurement", null);
151 this.getLayerByName("Cut Tool").data.getSource().clear(); 166 this.getLayerByName("Cut Tool")
167 .data.getSource()
168 .clear();
152 this.openLayersMap.removeInteraction(this.cutTool); 169 this.openLayersMap.removeInteraction(this.cutTool);
153 this.$store.commit("map/cutTool", null); 170 this.$store.commit("map/cutTool", null);
154 }, 171 },
155 cutEnd(event) { 172 cutEnd(event) {
156 const length = getLength(event.feature.getGeometry()); 173 const length = getLength(event.feature.getGeometry());
218 vectorSource.forEachFeatureIntersectingExtent( 235 vectorSource.forEachFeatureIntersectingExtent(
219 // need to use EPSG:3857 which is the proj of vectorSource 236 // need to use EPSG:3857 which is the proj of vectorSource
220 transformedLine, 237 transformedLine,
221 featureCallback 238 featureCallback
222 ); 239 );
223 }, 240 }
224 } 241 }
225 }; 242 };
226 </script> 243 </script>