Mercurial > gemma

comparison client/src/map/Maplayer.vue @ 754:105c421f99b1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: small improvements to code structure
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 24 Sep 2018 17:30:55 +0200
parents f09cbe80a864
children a6a8fe89eb84
comparison
equal deleted inserted replaced
753:e6f8d58434f4 754:105c421f99b1
14 14
15 <script> 15 <script>
16 import { HTTP } from "../application/lib/http"; 16 import { HTTP } from "../application/lib/http";
17 import { mapGetters } from "vuex"; 17 import { mapGetters } from "vuex";
18 import "ol/ol.css"; 18 import "ol/ol.css";
19 // openlayers imports, sorted by module name
20 import { Map, View } from "ol"; 19 import { Map, View } from "ol";
21 import Feature from "ol/Feature"; 20 import Feature from "ol/Feature";
22 // import { bbox as bboxFilter } from "ol/format/filter.js"; 21 // import { bbox as bboxFilter } from "ol/format/filter.js";
23 import { WFS, GeoJSON } from "ol/format.js"; 22 import { WFS, GeoJSON } from "ol/format.js";
24 import GeometryType from "ol/geom/GeometryType.js"; 23 // import GeometryType from "ol/geom/GeometryType.js";
25 import LineString from "ol/geom/LineString.js"; 24 import LineString from "ol/geom/LineString.js";
26 import Draw from "ol/interaction/Draw.js"; 25 import Draw from "ol/interaction/Draw.js";
27 import { Vector as VectorLayer } from "ol/layer.js"; 26 import { Vector as VectorLayer } from "ol/layer.js";
28 import { Vector as VectorSource } from "ol/source.js"; 27 import { Vector as VectorSource } from "ol/source.js";
29 28
46 vectorLayer: null, 45 vectorLayer: null,
47 vectorSource: null 46 vectorSource: null
48 }; 47 };
49 }, 48 },
50 computed: { 49 computed: {
51 ...mapGetters("mapstore", ["layers"]), 50 ...mapGetters("mapstore", ["layers", "getLayerByName"]),
52 mapStyle() { 51 mapStyle() {
53 return { 52 return {
54 mapfull: !this.split, 53 mapfull: !this.split,
55 mapsplit: this.split 54 mapsplit: this.split
56 }; 55 };
86 this.vectorSource.clear(); 85 this.vectorSource.clear();
87 }); 86 });
88 draw.on("drawend", this.drawEnd); 87 draw.on("drawend", this.drawEnd);
89 return draw; 88 return draw;
90 }, 89 },
90 findFeature(profileLine) {
91 return new Feature({
92 geometry: profileLine,
93 // FIXME: hardcoded bottleneck and survey date
94 bottleneck: "AT_Bottleneck_44",
95 date: "2017-11-20"
96 });
97 },
91 drawEnd(event) { 98 drawEnd(event) {
92 var inputLineString = event.feature.getGeometry().clone(); 99 const inputLineString = event.feature.getGeometry().clone();
93 if (inputLineString.getType() == GeometryType.LINE_STRING) { 100 // prepare to send the first line seqment to the server as GeoJSON
94 // prepare to send the first line seqment to the server as GeoJSON 101 inputLineString.transform("EPSG:3857", "EPSG:4326");
95 inputLineString.transform("EPSG:3857", "EPSG:4326"); 102 const [start, end] = inputLineString.getCoordinates();
96 var coords = inputLineString.getCoordinates(); 103 const profileLine = new LineString([start, end]);
97 if (coords.length >= 2) { 104 const feature = this.findFeature(profileLine);
98 var profileLine = new LineString([coords[0], coords[1]]); 105 const geoJSON = new GeoJSON({ geometryName: "geometry" }).writeFeature(
99 var feature = new Feature({ 106 feature
100 geometry: profileLine, 107 );
101 // FIXME: hardcoded bottleneck and survey date 108 console.log("Feature: ", feature);
102 bottleneck: "AT_Bottleneck_44", 109 console.log("geoJSON", geoJSON);
103 date: "2017-11-20" 110
104 }); 111 // // FIXME: assuming that we have the fairway dimensions loaded
105 var gStr = new GeoJSON({ geometryName: "geometry" }).writeFeature( 112 // var vectorSource = this.getLayerByName(
106 feature 113 // "Fairway Dimensions"
107 ); 114 // ).data.getSource();
108 console.log("Ready to start profile view with: ", feature, gStr); 115 // console.log(vectorSource);
109 116
110 // FIXME: assuming that we have the fairway dimensions loaded 117 // var diagStack = [];
111 var vectorSource = this.getLayerByName( 118 // vectorSource.forEachFeatureIntersectingExtent(
112 "Fairway Dimensions" 119 // // need to use EPSG:3857 which is the proj of vectorSource
113 ).data.getSource(); 120 // profileLine
114 console.log(vectorSource); 121 // .clone()
115 122 // .transform("EPSG:4326", "EPSG:3857")
116 var diagStack = []; 123 // .getExtent(),
117 vectorSource.forEachFeatureIntersectingExtent( 124 // feature => {
118 // need to use EPSG:3857 which is the proj of vectorSource 125 // // transform back to prepare for usage
119 profileLine 126 // var intersectingPolygon = feature
120 .clone() 127 // .getGeometry()
121 .transform("EPSG:4326", "EPSG:3857") 128 // .clone()
122 .getExtent(), 129 // .transform("EPSG:3857", "EPSG:4326");
123 feature => { 130 // console.log("intersecting:", intersectingPolygon);
124 // transform back to prepare for usage 131 // this.addToFairwayRectangle(
125 var intersectingPolygon = feature 132 // profileLine,
126 .getGeometry() 133 // intersectingPolygon,
127 .clone() 134 // 2.5, // FIXME use real fairway depth value for this feature
128 .transform("EPSG:3857", "EPSG:4326"); 135 // diagStack
129 console.log("intersecting:", intersectingPolygon); 136 // );
130 this.addToFairwayRectangle( 137 // }
131 profileLine, 138 // );
132 intersectingPolygon,
133 2.5, // FIXME use real fairway depth value for this feature
134 diagStack
135 );
136 }
137 );
138 }
139 }
140 }, 139 },
141 addToFairwayRectangle(profileLine, fairwayGeometry, depth, diagStack) { 140 addToFairwayRectangle(profileLine, fairwayGeometry, depth, diagStack) {
142 // both geometries have to be in EPSG:4326 141 // both geometries have to be in EPSG:4326
143 // uses turfjs distance() function 142 // uses turfjs distance() function
144 // pushes pairs of diagram points into diagStack 143 // pushes pairs of diagram points into diagStack
145 console.log( 144 // console.log(
146 "addToFairwayRectangle(", 145 // "addToFairwayRectangle(",
147 profileLine, 146 // profileLine,
148 fairwayGeometry, 147 // fairwayGeometry,
149 depth, 148 // depth,
150 diagStack, 149 // diagStack,
151 ")" 150 // ")"
152 ); 151 // );
153 var line = turfLineString(profileLine.getCoordinates()); 152 var line = turfLineString(profileLine.getCoordinates());
154 var polygon = turfPolygon(fairwayGeometry.getCoordinates()); 153 var polygon = turfPolygon(fairwayGeometry.getCoordinates());
155 var intersects = lineIntersect(line, polygon); 154 var intersects = lineIntersect(line, polygon);
156 console.log(intersects.features); 155 console.log(intersects.features);
157 156
158 var l = intersects.features.length; 157 var l = intersects.features.length;
159 if (l % 2 != 0) { 158 if (l % 2 != 0) {
160 console.log("Ignoring fairway because profile only intersects once."); 159 //console.log("Ignoring fairway because profile only intersects once.");
161 } else { 160 } else {
162 for (let i = 0; i < l; i += 2) { 161 for (let i = 0; i < l; i += 2) {
163 let pStartPoint = profileLine.getCoordinates()[0]; 162 let pStartPoint = profileLine.getCoordinates()[0];
164 let fStartPoint = intersects.features[i].geometry.coordinates; 163 let fStartPoint = intersects.features[i].geometry.coordinates;
165 let fEndPoint = intersects.features[i + 1].geometry.coordinates; 164 let fEndPoint = intersects.features[i + 1].geometry.coordinates;
170 distance(pStartPoint, fEndPoint, opts) * 1000, 169 distance(pStartPoint, fEndPoint, opts) * 1000,
171 depth 170 depth
172 ]); 171 ]);
173 } 172 }
174 } 173 }
175 console.log("Resulting diagStack:", diagStack); 174 //console.log("Resulting diagStack:", diagStack);
176 }, 175 },
177 activateInteraction() { 176 activateInteraction() {
178 const interaction = this.createInteraction(this.drawMode); 177 const interaction = this.createInteraction(this.drawMode);
179 this.interaction = interaction; 178 this.interaction = interaction;
180 this.openLayersMap.addInteraction(interaction); 179 this.openLayersMap.addInteraction(interaction);
205 .then(response => { 204 .then(response => {
206 var features = new GeoJSON().readFeatures( 205 var features = new GeoJSON().readFeatures(
207 JSON.stringify(response.data) 206 JSON.stringify(response.data)
208 ); 207 );
209 vectorSource.addFeatures(features); 208 vectorSource.addFeatures(features);
210 console.log( 209 // console.log(
211 "loaded", 210 // "loaded",
212 features.length, 211 // features.length,
213 featureRequestOptions.featureTypes, 212 // featureRequestOptions.featureTypes,
214 "features" 213 // "features"
215 ); 214 // );
216 // DEBUG console.log("loaded ", features, "for", vectorSource); 215 // DEBUG console.log("loaded ", features, "for", vectorSource);
217 // eslint-disable-next-line 216 // eslint-disable-next-line
218 }) 217 })
219 .catch(() => { 218 .catch(() => {
220 vectorSource.removeLoadedExtent(extent); 219 vectorSource.removeLoadedExtent(extent);
221 }); 220 });
222 }; 221 };
223 return loader; 222 return loader;
224 },
225 getLayerByName(name) {
226 for (let layer of this.layers) {
227 if (layer.name === name) {
228 return layer;
229 }
230 }
231 } 223 }
232 }, 224 },
233 watch: { 225 watch: {
234 drawMode() { 226 drawMode() {
235 if (this.interaction) { 227 if (this.interaction) {