simstadt_openlayers.js 13.9 KB
Newer Older
eric.duminil's avatar
eric.duminil committed
1
2
3
proj4.defs("EPSG:3068", "+proj=cass +lat_0=52.41864827777778 +lon_0=13.62720366666667 +x_0=40000 +y_0=10000 +ellps=bessel +datum=potsdam +units=m +no_defs"); // http://spatialreference.org/ref/epsg/3068/proj4js/
proj4.defs("EPSG:32632", "+proj=utm +zone=32 +ellps=WGS84 +datum=WGS84 +units=m +no_defs"); // http://spatialreference.org/ref/epsg/32632/proj4js/
proj4.defs("EPSG:31463", "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0" + " +ellps=bessel +datum=potsdam +units=m +no_defs"); // http://spatialreference.org/ref/epsg/31463/proj4js/
4
proj4.defs("EPSG:31466", "+proj=tmerc +lat_0=0 +lon_0=6 +k=1 +x_0=2500000 +y_0=0 +ellps=bessel +datum=potsdam +units=m +no_defs "); // http://spatialreference.org/ref/epsg/31466/proj4js/
eric.duminil's avatar
eric.duminil committed
5
proj4.defs("EPSG:31467", "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0" + " +ellps=bessel +datum=potsdam +units=m +no_defs"); // http://spatialreference.org/ref/epsg/31467/proj4js/
6
proj4.defs("EPSG:31468",  "+proj=tmerc +lat_0=0 +lon_0=12 +k=1 +x_0=4500000 +y_0=0 +ellps=bessel +towgs84=598.1,73.7,418.2,0.202,0.045,-2.455,6.7 +units=m +no_defs"); 
eric.duminil's avatar
eric.duminil committed
7
8
9
10
proj4.defs("EPSG:32118", "+proj=lcc +lat_1=41.03333333333333 +lat_2=40.66666666666666 +lat_0=40.16666666666666 +lon_0=-74 +x_0=300000 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs"); // http://spatialreference.org/ref/epsg/32118/proj4js/
proj4.defs("EPSG:2263", "+proj=lcc +lat_1=41.03333333333333 +lat_2=40.66666666666666 +lat_0=40.16666666666666 +lon_0=-74 +x_0=300000.0000000001 +y_0=0 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048006096012192 +no_defs "); //  http://www.spatialreference.org/ref/epsg/nad83-new-york-long-island-ftus/proj4/
//NOTE: Proj4 string for 28992 is wrong at http://spatialreference.org/ref/epsg/amersfoort-rd-new/
//NOTE: Corrected version from https://oegeo.wordpress.com/2008/05/20/note-to-self-the-one-and-only-rd-projection-string/
11
proj4.defs("EPSG:25832", "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs "); // http://spatialreference.org/ref/epsg/etrs89-utm-zone-32n/proj4/
12
proj4.defs("EPSG:25833", "+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs "); // http://spatialreference.org/ref/epsg/etrs89-utm-zone-33n/proj4/
eric.duminil's avatar
eric.duminil committed
13
14
proj4.defs("EPSG:28992", "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.999908 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs <>"); // 

Eric Duminil's avatar
Eric Duminil committed
15
var regionChooser = (function(){
16
	var publicScope = {};
17
	var fromJavaFX = navigator.userAgent.indexOf('JavaFX') !== -1;
18
19
	var dataPanel = $('#dataPanel');
	var wgs84Sphere = new ol.Sphere(6378137);
20
21
	var gmlId = 0;
	var novaFactoryId = 0;
22
23
24
25
	
	if (fromJavaFX){
		$("html").addClass("wait");
	}
26
27
28

	var osm_layer = new ol.layer.Tile({
		source: new ol.source.OSM()
eric.duminil's avatar
eric.duminil committed
29
30
	});

31
32
33
34
35
36
37
38
39
	function read_kml(url){
		return new ol.source.KML({
			projection : ol.proj.get('EPSG:3857'),
			url : url,
			extractAttributes : false,
			extractStyles : false
		});
	}
	
40
	var kml_source = read_kml(fromJavaFX ? undefined : 'data/citygml_hulls.kml');
eric.duminil's avatar
eric.duminil committed
41

42
43
44
45
46
47
48
49
50
51
52
53
	function polygon_style(color, alpha) {
		return new ol.style.Style({
			fill : new ol.style.Fill({
				color : 'rgba(255, 255, 255,' + alpha + ')'
			}),
			stroke : new ol.style.Stroke({
				color : color,
				width : 2,
				lineDash : [ 5, 10 ]
			}),
		});
	}
eric.duminil's avatar
eric.duminil committed
54

55
56
	var kml_layer = new ol.layer.Vector({
		source : kml_source,
57
		style : polygon_style('#447744', 0.2)
58
59
60
61
62
63
64
65
66
67
	});

	var intersections = new ol.source.Vector();

	var intersections_layer = new ol.layer.Vector({
		source : intersections,
		style : new ol.style.Style({
			fill : new ol.style.Fill({
				color : 'rgba(255, 155, 51, 0.2)'
			})
eric.duminil's avatar
eric.duminil committed
68
69
		})
	});
70
71
72
73
74

	novafactory_vectors = new ol.source.Vector({
		features : []
	});

75
	publicScope.addCityGmlHull = function(kmlString) {
76
		options = {featureProjection: ol.proj.get('EPSG:3857')};
77
		feature = kmlFormat.readFeature(kmlString, options);
78
		feature.setId(gmlId++);
79
80
		kml_source.addFeature(feature);
		dataPanel.append('.');
81
82
83
84
		srsName = feature.get("srsName") || "EPSG:31467";
		if (proj4.defs(srsName) === undefined){
			console.warning(srsName + " isn't defined by Proj4js!")
		}
85
86
	};
	
87
88
89
90
91
92
93
94
	publicScope.addNovaFactoryProduct = function(xmin, ymin, xmax, ymax, name, epsgId) {
		var box = new ol.geom.Polygon(
				[ [ [ xmin, ymin ], [ xmin, ymax ], [ xmax, ymax ], [ xmax, ymin ], [ xmin, ymin ] ] ]);
		box.transform('EPSG:' + epsgId, 'EPSG:3857');
		var feature = new ol.Feature({
			geometry : box,
			name : name,
		});
95
		feature["geoJSON"] = geoJsonFormat.writeFeatureObject(feature);
eric.duminil's avatar
eric.duminil committed
96
		feature["area"] = feature.getGeometry().getArea();
97
98
		feature["project"] = "novaFACTORY";
		feature["name"] = name;
99
		feature["source"] = "NovaFACTORY";
100
		feature.setId(novaFactoryId++);
101
		
102
103
		novafactory_vectors.addFeature(feature);
	};
104
	
105
106
107
	var novafactory_layer = new ol.layer.Vector({
		source : novafactory_vectors,
		style : polygon_style('#ff7700', 0.1)
eric.duminil's avatar
eric.duminil committed
108
	});
109
110
111

	var map = new ol.Map({
		target : 'map',
112
		layers : [ osm_layer, kml_layer, novafactory_layer, intersections_layer ],
113
114
115
116
117
		interactions : ol.interaction.defaults({
			keyboard : true
		})
	});

118
	var geoJsonFormat = new ol.format.GeoJSON();
119
	var kmlFormat = new ol.format.KML({extractStyles: false});
120
121
122
123
124
125
126

	kml_layer.addEventListener("change", function() {
		map.getView().fitExtent(kml_source.getExtent(), (map.getSize()));
	});

	function updateGMLPolygons() {
		kml_source.forEachFeature(function(feature) {
127
			feature["geoJSON"] = geoJsonFormat.writeFeatureObject(feature);
128
			feature["area"] = feature.getGeometry().getArea();
Eric Duminil's avatar
Eric Duminil committed
129
130
			feature["project"] = feature.get("project");
			feature["name"] = feature.get("name");
131
132
133
134
135
136
137
138
139
140
			feature["source"] = "CityGML";
		});
	}

	// The features are not added to a regular vector layer/source,
	// but to a feature overlay which holds a collection of features.
	// This collection is passed to the modify and also the draw
	// interaction, so that both can add or modify features.
	var featureOverlay = new ol.FeatureOverlay({
		style : new ol.style.Style({
eric.duminil's avatar
eric.duminil committed
141
			fill : new ol.style.Fill({
142
143
144
145
146
147
148
149
150
151
152
				color : 'rgba(255, 155, 51, 0.5)'
			}),
			stroke : new ol.style.Stroke({
				color : '#ffcc33',
				width : 4
			}),
			image : new ol.style.Circle({
				radius : 5,
				fill : new ol.style.Fill({
					color : '#ffcc33'
				})
eric.duminil's avatar
eric.duminil committed
153
154
155
			})
		})
	});
156
157
	featureOverlay.setMap(map);

Eric Duminil's avatar
Eric Duminil committed
158
	//TODO: Rename to Javascript naming convention (CamelCase).
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
	var selected_features = featureOverlay.getFeatures();
	selected_features.on('add', function(event) {
		var feature = event.element;
		feature.on("change", function() {
			displayInfo();
		});
	});

	var modify = new ol.interaction.Modify({
		features : featureOverlay.getFeatures(),
		// the SHIFT key must be pressed to delete vertices, so
		// that new vertices can be drawn at the same position
		// of existing vertices
		deleteCondition : function(event) {
			return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
		}
	});
	map.addInteraction(modify);

	var draw = new ol.interaction.Draw({
		features : featureOverlay.getFeatures(),
		type : 'Polygon'
	});
	map.addInteraction(draw);

	var sketch;
eric.duminil's avatar
eric.duminil committed
185

186
187
188
189
190
	draw.on('drawstart', function(evt) {
		sketch = evt.feature;
		updateGMLPolygons();
	});
	var sourceProj = map.getView().getProjection();
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
	
	function showLinkToDownload(feature, jsonIntersection, polygonArea){
		var intersection = geoJsonFormat.readFeature(jsonIntersection);
		var intersectionArea = intersection.getGeometry().getArea();
		var citygml_percentage = Math.round(intersectionArea / feature["area"] * 100);
		var sketch_percentage = Math.round(intersectionArea / polygonArea * 100);
		intersections.addFeature(intersection);
		var link = '<li>'
		if (fromJavaFX) {
			link += "<a href=\"#\" onclick=\"regionChooser.downloadRegionFrom" + feature["source"] + "(" + feature.getId()
					+ ");return false;\">" + feature["name"] + "</a>";
		} else {
			link += feature['name'];
		}

		link += " (" + citygml_percentage + "%";
		if (sketch_percentage == 100) {
			link += ", all inside";
		}
		dataPanel.append(link + ")\n");
	}
	
213
	function findIntersection(feature, polygon) {
214
		try {
215
			return turf.intersect(polygon, feature["geoJSON"]);
216
217
218
219
		} catch (err) {
			console.log(feature.get('name') + " - " + err);
		}
	}
220
221

	function findIntersections() {
222
223
		var polygon = geoJsonFormat.writeFeatureObject(sketch);
		var polygonArea = sketch.getGeometry().getArea();
224
225
		var intersection_found = false;
		intersections.clear();
226
		features_by_project = groupBy(kml_source.getFeatures(), "project");
227
228
229
		
		features_by_project["NovaFactory"] = novafactory_vectors.getFeatures();
		
Eric Duminil's avatar
Eric Duminil committed
230
		Object.keys(features_by_project).sort().forEach(function(project) {
231
		    features = features_by_project[project];
232
233
234
		    features_and_intersections = features.map(f=> [f, findIntersection(f,polygon)]).filter(l => l[1] !== undefined);
		    if (features_and_intersections.length > 0){
		    	intersection_found = true;
235
				dataPanel.append("<h2 class='info'>" + project);
236
237
		    	features_and_intersections.forEach(l => showLinkToDownload(l[0], l[1], polygonArea));
		    }
238
		});
239
		
240
241
		if (!intersection_found) {
			dataPanel.append("No intersection found with any CityGML or NovaFactory product<br/>\n");
eric.duminil's avatar
eric.duminil committed
242
243
		}
	}
244

245
246
247
248
	publicScope.display = function(text){
		dataPanel.append(text + "<br/>\n");
	}
	
249
250
251
	publicScope.downloadRegionFromCityGML = function(i) {
		// TODO: Disable all links
		// TODO: DRY
252
		var feature = kml_source.getFeatureById(i);
253
254
255
256
257
258
259
		// Waiting 100ms in order to let the cursor change
		setTimeout(function() {
			var start = new Date().getTime();
			var srsName = feature.get("srsName") || "EPSG:31467";
			if (proj4.defs(srsName)){
				$("html").addClass("wait");
				console.log("Selected region is written in " + srsName + " coordinate system.");
260
261
262
263
264
265
				try {
					fxapp.downloadRegionFromCityGML(sketchAsWKT(srsName), feature.get("project"), feature.get("name"), srsName);
					dataPanel.append("<h2 class='ok'>Done!</h2><br/>\n");
				} catch (e) {
					dataPanel.append("<h2 class='error'>Some problem occured!</h2><br/>\n");
				}
266
267
				var end = new Date().getTime();
				var time = end - start;
Eric Duminil's avatar
Eric Duminil committed
268
				console.log('Download Execution time: ' + (time / 1000).toFixed(3) + 's');
269
270
271
272
273
274
275
276
277
				setTimeout(function() {
					$("html").removeClass("wait");
				}, 100);
			} else {
				var msg = "ERROR : Unknown coordinate system : \"" + srsName + "\". Cannot extract any region";
				console.log(msg);
				dataPanel.append(msg + "<br/>\n");
			}
		}, 100);
eric.duminil's avatar
eric.duminil committed
278
279
	}

280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
	function displayInfo() {
		dataPanel.empty();
		var geom = /** @type {ol.geom.Polygon} */
		(sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326'));
		var coordinates = geom.getLinearRing(0).getCoordinates();
		var area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
		var coords = geom.getLinearRing(0).getCoordinates();
		if (!fromJavaFX) {
			var wgs84_coords = "";
			var n = coords.length;
			for (var i = 0; i < n; i++) {
				var wgs84_coord = coords[i];
				wgs84_coords += "(" + wgs84_coord[1] + "," + wgs84_coord[0] + ")<br/>";

			}
			dataPanel.append("WGS84 Coordinates<br/>");
			dataPanel.append(wgs84_coords + "<br/>\n");
eric.duminil's avatar
eric.duminil committed
297
		}
298
		dataPanel.append("<h3 class='clean'>Area : " + (area / 10000).toFixed(1) + " ha\n");
299
		findIntersections();
eric.duminil's avatar
eric.duminil committed
300
	}
301
302
303
304
305

	draw.on('drawend', function() {
		displayInfo();
		draw.setActive(false);
	});
306
307
308
309
310
311
312
313
	
	// Pressing ESCAPE or DELETE resets the drawing.
	// With OpenLayers 3.9, draw_interaction.removeLastPoint(); might be better.
	document.addEventListener('keydown', function(e) {
		if (e.which == 27 || e.which == 46){
			resetDrawing();
		}
	});
314

315
316
	function resetDrawing(){
		console.log("Reset drawing");
317
318
319
		try {
			draw.finishDrawing();
		} finally {
Eric Duminil's avatar
Eric Duminil committed
320
			displayHelp();
321
322
323
324
325
326
			$("html").removeClass("wait");
			draw.setActive(true);
			featureOverlay.getFeatures().clear();
			intersections.clear();
			focusOnMap();
		}
327
	}
328
	
329
330
331
	novafactory_layer.downloadFinished = function() {
		// FIXME: Weird <br>s are inserted between lines
		// FIXME: Doesn't stop waiting cursor
eric.duminil's avatar
eric.duminil committed
332
		$("html").removeClass("wait");
333
334
335
336
337
338
339
340
341
342
		setTimeout(function() {
			dataPanel.append("NovaFactory : DONE <br/>\n");
		}, 100);
	};

	novafactory_layer.updateStatus = function(status) {
		dataPanel.append("NovaFactory : " + status + "<br/>\n");
	};

	novafactory_layer.selectSaveFile = function(zipFilename) {
343
		fxapp.extractZIPtoGML(zipFilename);
344
345
346
347
	};

	publicScope.downloadRegionFromNovaFACTORY = function(i) {
		$("html").addClass("wait");
348
		var feature = novafactory_vectors.getFeatureById(i);
349
350
		// Waiting 100ms in order to let the cursor change
		setTimeout(function() {
351
			fxapp.downloadRegion(sketchAsWKT(), feature.get('name'), novafactory_layer);
352
		}, 100);
eric.duminil's avatar
eric.duminil committed
353
	}
354
355
356
357
358
359
360
361
362

	function sketchAsWKT(srsName) {
		srsName = (typeof srsName === 'undefined') ? 'EPSG:4326' : srsName;
		var wktFormat = new ol.format.WKT();
		return wktFormat.writeFeature(sketch, {
			dataProjection : ol.proj.get(srsName),
			featureProjection : ol.proj.get('EPSG:3857')
		});
	}
363
	
364
365
366
367
	function focusOnMap() {
		$('#map').focus();
	}
	
368
369
370
371
	var fxapp = undefined;
	
	publicScope.setFxApp = function(app){
		fxapp = app;
372
373
374
		console.log = function(message){
			fxapp.log(message);
		}
375
376
377
378
		
		console.warning = function(message){
			fxapp.warning(message);
		}
379
	}
Eric Duminil's avatar
Eric Duminil committed
380
	
381
382
383
384
385
386
387
	groupBy = function(xs, key) {
		  return xs.reduce(function(rv, x) {
			(rv[x[key]] = rv[x[key]] || []).push(x);
			return rv;
		  }, {});
		};
	
Eric Duminil's avatar
Eric Duminil committed
388
389
	function displayHelp(){
		dataPanel.empty();
390
		dataPanel.append("<h2 class='info'>Welcome to Region Chooser!<br><br>\n");
Eric Duminil's avatar
Eric Duminil committed
391
392
393
394
395
396
		dataPanel.append("You can draw a polygon on the map by clicking.<br>\n");
		dataPanel.append("You can add a new point to an existing edge by clicking and dragging.<br>\n");
		dataPanel.append("You can remove a point with SHIFT + clicking.<br>\n");
		dataPanel.append("You can cancel drawing with ESC or DEL.<br><br>\n");
		dataPanel.append("After drawing a polygon which intersects with a GML file, you can download the corresponding part by clicking on the filename.<br>\n");
	}
397

398
399
	// Executed by JavaFX when whole page is loaded.
	publicScope.ready = function() {
400
		updateGMLPolygons();
Eric Duminil's avatar
Eric Duminil committed
401
		displayHelp();
402
		$("html").removeClass("wait");
403
		console.log("READY!");
404
405
	}

406
	focusOnMap();
Eric Duminil's avatar
Eric Duminil committed
407
408
409
	//var regionChooser = publicScope; //NOTE: In order to open closure. For debugging
	return publicScope;
})();