simstadt_openlayers.js

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/
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/
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/
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"); 
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/
proj4.defs("EPSG:25832", "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs "); // http://spatialreference.org/ref/epsg/etrs89-utm-zone-32n/proj4/
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 <>"); // 

var regionChooser = (function(){
	var publicScope = {};
	var fromJavaFX = navigator.userAgent.indexOf('JavaFX') !== -1;
	var dataPanel = $('#dataPanel');
	var wgs84Sphere = new ol.Sphere(6378137);
	
	if (fromJavaFX){
		$("html").addClass("wait");
	}

	var osm_layer = new ol.layer.Tile({
		source: new ol.source.OSM()
	});

	function read_kml(url){
		return new ol.source.KML({
			projection : ol.proj.get('EPSG:3857'),
			url : url,
			extractAttributes : false,
			extractStyles : false
		});
	}
	
	var kml_source = read_kml(fromJavaFX ? undefined : 'data/citygml_hulls.kml');

	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 ]
			}),
		});
	}

	var kml_layer = new ol.layer.Vector({
		source : kml_source,
		style : polygon_style('#447744', 0.2)
	});

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

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

	publicScope.addCityGmlHull = function(kmlString) {
		options = {featureProjection: ol.proj.get('EPSG:3857')};
		feature = kmlFormat.readFeature(kmlString, options);
		kml_source.addFeature(feature);
		dataPanel.append('.');
		srsName = feature.get("srsName") || "EPSG:31467";
		if (proj4.defs(srsName) === undefined){
			console.warning(srsName + " isn't defined by Proj4js!")
		}
	};
	
	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,
		});
		feature["geoJSON"] = geoJsonFormat.writeFeatureObject(feature);
		feature["area"] = feature.getGeometry().getArea();
		feature["description"] = "novaFACTORY>" + name;
		feature["source"] = "NovaFACTORY";
		
		novafactory_vectors.addFeature(feature);
	};
	
	var novafactory_layer = new ol.layer.Vector({
		source : novafactory_vectors,
		style : polygon_style('#ff7700', 0.1)
	});

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

	var geoJsonFormat = new ol.format.GeoJSON();
	var kmlFormat = new ol.format.KML({extractStyles: false});

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

	function updateGMLPolygons() {
		kml_source.forEachFeature(function(feature) {
			feature["geoJSON"] = geoJsonFormat.writeFeatureObject(feature);
			feature["area"] = feature.getGeometry().getArea();
			var project = feature.get("project");
			var name = feature.get("name");
			feature["description"] = project + ">" + name;
			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({
			fill : new ol.style.Fill({
				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'
				})
			})
		})
	});
	featureOverlay.setMap(map);

	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;

	draw.on('drawstart', function(evt) {
		sketch = evt.feature;
		updateGMLPolygons();
	});
	var sourceProj = map.getView().getProjection();

	function findIntersections() {
		var sketch_area = sketch.getGeometry().getArea();
		var poly1 = geoJsonFormat.writeFeatureObject(sketch);
		var intersection_found = false;
		intersections.clear();
		function findIntersection(feature) {
			try {
				var jsonIntersection = turf.intersect(poly1, feature["geoJSON"]);
				if (undefined !== jsonIntersection) {
					if (!intersection_found) {
						dataPanel.append("Intersection found with :<br/>\n");
						intersection_found = true;
					}
					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 / sketch_area * 100);
					intersections.addFeature(intersection);
					var link = '<li>'

					var description;
					if (fromJavaFX) {
						link += "<a href=\"#\" onclick=\"regionChooser.downloadRegionFrom" + feature["source"] + "(" + i
								+ ");return false;\">" + feature["description"] + "</a>";
					} else {
						link += feature['description'];
					}

					link += " (" + citygml_percentage + "%";
					if (sketch_percentage == 100) {
						link += ", all inside";
					}
					dataPanel.append(link + ")\n");
				}

			} catch (err) {
				console.log(feature.get('description') + " - " + err);
			}
			i++;
		}
		var i = 0;
		novafactory_vectors.forEachFeature(findIntersection);
		i = 0;
		kml_source.forEachFeature(findIntersection);
		if (!intersection_found) {
			dataPanel.append("No intersection found with any CityGML or NovaFactory product<br/>\n");
		}
	}

	publicScope.display = function(text){
		dataPanel.append(text + "<br/>\n");
	}
	
	publicScope.downloadRegionFromCityGML = function(i) {
		// TODO: Disable all links
		// TODO: DRY
		var feature = kml_source.getFeatures()[i];
		// 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.");
				fxapp.downloadRegionFromCityGML(sketchAsWKT(srsName), feature.get("project"), feature.get("name"), srsName);
				var end = new Date().getTime();
				var time = end - start;
				console.log('DL Execution time: ' + time);
				setTimeout(function() {
					$("html").removeClass("wait");
					dataPanel.append("Done<br/>\n");
				}, 100);
			} else {
				var msg = "ERROR : Unknown coordinate system : \"" + srsName + "\". Cannot extract any region";
				console.log(msg);
				dataPanel.append(msg + "<br/>\n");
			}
		}, 100);
	}

	function displayInfo() {
		// var start = new Date().getTime();
		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 += "regionPolygon.add(new Coord(" + wgs84_coord[1] +
				// "," + wgs84_coord[0] + "));<br/>";
				wgs84_coords += "(" + wgs84_coord[1] + "," + wgs84_coord[0] + ")<br/>";

			}
			dataPanel.append("WGS84 Coordinates<br/>");
			dataPanel.append(wgs84_coords + "<br/>\n");
		}
		dataPanel.append("Area" + "<br/>\n");
		dataPanel.append((Math.round(area / 1000) / 10).toString() + " ha<br/><br/>\n");
		findIntersections();
		// var end = new Date().getTime();
		// var time = end - start;
		// console.log('Execution time: ' + time);
	}

	draw.on('drawend', function() {
		displayInfo();
		draw.setActive(false);
	});
	
	// 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();
		}
	});

	function resetDrawing(){
		console.log("Reset drawing");
		try {
			draw.finishDrawing();
		} finally {
			displayHelp();
			$("html").removeClass("wait");
			draw.setActive(true);
			featureOverlay.getFeatures().clear();
			intersections.clear();
			focusOnMap();
		}
	}
	
	novafactory_layer.downloadFinished = function() {
		// FIXME: Weird <br>s are inserted between lines
		// FIXME: Doesn't stop waiting cursor
		$("html").removeClass("wait");
		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) {
		fxapp.extractZIPtoGML(zipFilename);
	};

	publicScope.downloadRegionFromNovaFACTORY = function(i) {
		$("html").addClass("wait");
		var feature = novafactory_vectors.getFeatures()[i];
		// Waiting 100ms in order to let the cursor change
		setTimeout(function() {
			fxapp.downloadRegion(sketchAsWKT(), feature.get('name'), novafactory_layer);
		}, 100);
	}

	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')
		});
	}
	
	function focusOnMap() {
		$('#map').focus();
		// $('#map').scrollIntoView();
	}
	
	var fxapp = undefined;
	
	publicScope.setFxApp = function(app){
		fxapp = app;
		console.log = function(message){
			fxapp.log(message);
		}
		
		console.warning = function(message){
			fxapp.warning(message);
		}
	}
	
	function displayHelp(){
		dataPanel.empty();
		dataPanel.append("Welcome to Region Chooser!<br><br>\n");
		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");
	}

	// Executed by JavaFX when whole page is loaded.
	publicScope.ready = function() {
		updateGMLPolygons();
		displayHelp();
		$("html").removeClass("wait");
		console.log("READY!");
	}

	focusOnMap();
	//var regionChooser = publicScope; //NOTE: In order to open closure. For debugging
	return publicScope;
})();