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);