Mercurial > gemma
comparison client/src/map/Maplayer.vue @ 802:327aa4a18a1c
Fairway profile WIP
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 27 Sep 2018 13:36:43 +0200 |
parents | 644172f201e8 |
children | 68a39aea942a |
comparison
equal
deleted
inserted
replaced
801:b6a1779ffb42 | 802:327aa4a18a1c |
---|---|
33 polygon as turfPolygon | 33 polygon as turfPolygon |
34 } from "@turf/helpers"; | 34 } from "@turf/helpers"; |
35 //import { lineIntersect as turfLineIntersect } from "@turf/line-intersect"; | 35 //import { lineIntersect as turfLineIntersect } from "@turf/line-intersect"; |
36 import lineIntersect from "@turf/line-intersect"; | 36 import lineIntersect from "@turf/line-intersect"; |
37 import { displayError } from "../application/lib/errors.js"; | 37 import { displayError } from "../application/lib/errors.js"; |
38 | |
39 const DEMODATA = 2.5; | |
38 | 40 |
39 export default { | 41 export default { |
40 name: "maplayer", | 42 name: "maplayer", |
41 props: ["drawMode", "lat", "long", "zoom", "split"], | 43 props: ["drawMode", "lat", "long", "zoom", "split"], |
42 data() { | 44 data() { |
117 feature | 119 feature |
118 ); | 120 ); |
119 this.$store | 121 this.$store |
120 .dispatch("fairwayprofile/loadProfile", geoJSON) | 122 .dispatch("fairwayprofile/loadProfile", geoJSON) |
121 .then(() => { | 123 .then(() => { |
122 // FIXME: assuming that we have the fairway dimensions loaded | |
123 var vectorSource = this.getLayerByName( | 124 var vectorSource = this.getLayerByName( |
124 "Fairway Dimensions" | 125 "Fairway Dimensions" |
125 ).data.getSource(); | 126 ).data.getSource(); |
126 console.log(vectorSource); | |
127 var diagStack = []; | |
128 vectorSource.forEachFeatureIntersectingExtent( | 127 vectorSource.forEachFeatureIntersectingExtent( |
129 // need to use EPSG:3857 which is the proj of vectorSource | 128 // need to use EPSG:3857 which is the proj of vectorSource |
130 profileLine | 129 profileLine |
131 .clone() | 130 .clone() |
132 .transform("EPSG:4326", "EPSG:3857") | 131 .transform("EPSG:4326", "EPSG:3857") |
135 // transform back to prepare for usage | 134 // transform back to prepare for usage |
136 var intersectingPolygon = feature | 135 var intersectingPolygon = feature |
137 .getGeometry() | 136 .getGeometry() |
138 .clone() | 137 .clone() |
139 .transform("EPSG:3857", "EPSG:4326"); | 138 .transform("EPSG:3857", "EPSG:4326"); |
140 console.log("intersecting:", intersectingPolygon); | |
141 this.addToFairwayRectangle( | 139 this.addToFairwayRectangle( |
142 profileLine, | 140 profileLine, |
143 intersectingPolygon, | 141 intersectingPolygon, |
144 2.5, // FIXME use real fairway depth value for this feature | 142 DEMODATA |
145 diagStack | |
146 ); | 143 ); |
147 } | 144 } |
148 ); | 145 ); |
149 }) | 146 }) |
150 .catch(error => { | 147 .catch(error => { |
153 title: "Backend Error", | 150 title: "Backend Error", |
154 message: `${status}: ${data.message || data}` | 151 message: `${status}: ${data.message || data}` |
155 }); | 152 }); |
156 }); | 153 }); |
157 }, | 154 }, |
158 addToFairwayRectangle(profileLine, fairwayGeometry, depth, diagStack) { | 155 addToFairwayRectangle(profileLine, fairwayGeometry, depth) { |
159 // both geometries have to be in EPSG:4326 | 156 // both geometries have to be in EPSG:4326 |
160 // uses turfjs distance() function | 157 // uses turfjs distance() function |
161 // pushes pairs of diagram points into diagStack | 158 let fairwayCoordinates = []; |
162 console.log( | |
163 "addToFairwayRectangle(", | |
164 profileLine, | |
165 fairwayGeometry, | |
166 depth, | |
167 diagStack, | |
168 ")" | |
169 ); | |
170 var line = turfLineString(profileLine.getCoordinates()); | 159 var line = turfLineString(profileLine.getCoordinates()); |
171 var polygon = turfPolygon(fairwayGeometry.getCoordinates()); | 160 var polygon = turfPolygon(fairwayGeometry.getCoordinates()); |
172 var intersects = lineIntersect(line, polygon); | 161 var intersects = lineIntersect(line, polygon); |
173 console.log(intersects.features); | |
174 | |
175 var l = intersects.features.length; | 162 var l = intersects.features.length; |
176 if (l % 2 != 0) { | 163 if (l % 2 != 0) { |
177 console.log("Ignoring fairway because profile only intersects once."); | 164 console.log("Ignoring fairway because profile only intersects once."); |
178 } else { | 165 } else { |
179 for (let i = 0; i < l; i += 2) { | 166 for (let i = 0; i < l; i += 2) { |
180 let pStartPoint = profileLine.getCoordinates()[0]; | 167 let pStartPoint = profileLine.getCoordinates()[0]; |
181 let fStartPoint = intersects.features[i].geometry.coordinates; | 168 let fStartPoint = intersects.features[i].geometry.coordinates; |
182 let fEndPoint = intersects.features[i + 1].geometry.coordinates; | 169 let fEndPoint = intersects.features[i + 1].geometry.coordinates; |
183 let opts = { units: "kilometers" }; | 170 let opts = { units: "kilometers" }; |
184 | 171 |
185 diagStack.push([ | 172 fairwayCoordinates.push([ |
186 distance(pStartPoint, fStartPoint, opts) * 1000, | 173 distance(pStartPoint, fStartPoint, opts) * 1000, |
187 distance(pStartPoint, fEndPoint, opts) * 1000, | 174 distance(pStartPoint, fEndPoint, opts) * 1000, |
188 depth | 175 depth |
189 ]); | 176 ]); |
190 } | 177 } |
191 } | 178 } |
192 console.log("Resulting diagStack:", diagStack); | 179 this.$store.commit( |
180 "fairwayprofile/setFairwayCoordinates", | |
181 fairwayCoordinates | |
182 ); | |
193 }, | 183 }, |
194 activateInteraction() { | 184 activateInteraction() { |
195 const interaction = this.createInteraction(this.drawMode); | 185 const interaction = this.createInteraction(this.drawMode); |
196 this.interaction = interaction; | 186 this.interaction = interaction; |
197 this.openLayersMap.addInteraction(interaction); | 187 this.openLayersMap.addInteraction(interaction); |