Mercurial > gemma
comparison client/src/drawtool/Drawtool.vue @ 1144:5f98d0c9d738
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> |