simstadt_openlayers.js

//TODO: Clean up code and don't leave so many global variables

var reset_btn = $('#reset')[0];
var dataPanel = $('#dataPanel');

var wgs84Sphere = new ol.Sphere(6378137);

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: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: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: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 osm_layer = new ol.layer.Tile({
	source: new ol.source.OSM()
});

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

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('#777777', 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)'
		})
	})
});

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

novafactory_vectors.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["available"] = true;
	feature["source"] = "NovaFACTORY";
	this.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();

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";
		var citygmlHere;
		if (fromJavaFX) {
			citygmlHere = fxapp.checkIfCityGMLSAreAvailable(project, name);
		}
		feature["available"] = citygmlHere;
	});
}

// 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;
var fromJavaFX;

draw.on('drawstart', function(evt) {
	fromJavaFX = (typeof fxapp !== 'undefined');
	sketch = evt.feature;
	reset_btn.disabled = false;
	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 description;
				if (feature["available"]) {
					description = "<a href=\"#\" onclick=\"downloadRegionFrom" + feature["source"] + "(" + i
							+ ");return false;\">" + feature["description"] + "</a>";
					// console.log(description);
				} else {
					description = feature['description'];
				}

				dataPanel.append(description + " (" + citygml_percentage + "%");
				if (sketch_percentage == 100) {
					dataPanel.append(", all inside");
				}
				dataPanel.append(")<br/>\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");
	}
}

function downloadRegionFromCityGML(i) {
	// TODO: Disable all links
	// TODO: DRY
	$("html").addClass("wait");
	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";
		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);
	}, 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);
});

$('#reset').click(function() {
	try {
		draw.finishDrawing();
	} finally {
		dataPanel.empty();
		$("html").removeClass("wait");
		draw.setActive(true);
		featureOverlay.getFeatures().clear();
		intersections.clear();
		reset_btn.disabled = true;
		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);
};

function downloadRegionFromNovaFACTORY(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) {
	console.log(srsName); //TODO: Check if proj4 knows this coordinate system
	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();
}

focusOnMap();