simstadt_openlayers.js

//TODO: Add zoom to extent as control
//TODO: Add keyboard controls . ol.interaction.KeyboardPan
//TODO: Many polygons?
//TODO: Movable corners
//TODO: Add text to citygml vector

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/

var wgs84Sphere = new ol.Sphere(6378137);

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

var kml_layer = new ol.layer.Vector({
	source : kml_source,
	style : new ol.style.Style({
		fill : new ol.style.Fill({
			color : 'rgba(255, 255, 255, 0.2)'
		}),
		stroke : new ol.style.Stroke({
			color : '#777777',
			width : 2,
			lineDash : [ 5, 10 ]
		}),
	})
});

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

var polygons_layer = new ol.layer.Vector({
	source : polygons,
	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'
			})
		})
	})
});

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

var map = new ol.Map({
	target : 'map',
	layers : [ osm_layer, kml_layer, polygons_layer ],
});

var draw = new ol.interaction.Draw({
	source : polygons,
	type : 'Polygon'
});

draw.on('drawstart', function(evt) {
	sketch = evt.feature;
});

var sourceProj = map.getView().getProjection();

function findIntersections() {
	var geoJSONformat = new ol.format.GeoJSON();
	var wktFormat = new ol.format.WKT();
	var features = kml_source.getFeatures();
	var wgs84_sketch = /** @type {ol.geom.Polygon} */
	(sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326'));
	var sketch_area = sketch.getGeometry().getArea();
	var poly1 = geoJSONformat.writeFeatureObject(new ol.Feature(wgs84_sketch));
	var intersection_found = false;
	for (var i = 0; i < features.length; i++) {
		var feature = features[i];
		var wgs84_citygml = /** @type {ol.geom.Polygon} */
		(feature.getGeometry().clone().transform(sourceProj, 'EPSG:4326'));
		var poly2 = geoJSONformat.writeFeatureObject(new ol.Feature(wgs84_citygml));
		try {
			var jsonIntersection = turf.intersect(poly1, poly2);
			if (undefined != jsonIntersection) {
				if (!intersection_found) {
					$('#dataPanel').append("Intersection found with :<br/>\n");
					intersection_found = true;
				}
				var intersection = geoJSONformat.readFeature(jsonIntersection, {
					dataProjection : ol.proj.get('EPSG:4326'),
					featureProjection : ol.proj.get('EPSG:3857')
				});
				console.log(intersection);
				console.log(wktFormat.writeFeature(intersection, {
					dataProjection : ol.proj.get('EPSG:4326'),
					featureProjection : ol.proj.get('EPSG:3857')

				}));
				var intersectionArea = intersection.getGeometry().getArea();
				var citygmlArea = feature.getGeometry().getArea();
				var citygml_percentage = Math.round(intersectionArea / citygmlArea * 100);
				var sketch_percentage = Math.round(intersectionArea / sketch_area * 100);
				polygons.addFeature(intersection);

				intersection.setStyle(new ol.style.Style({
					fill : new ol.style.Fill({
						color : 'rgba(255, 155, 51, 0.5)'
					})
				}))
				$('#dataPanel').append(feature.get('description') + " (" + citygml_percentage + "%");
				if (sketch_percentage == 100) {
					$('#dataPanel').append(", all inside");
				}
				$('#dataPanel').append(")<br/>\n");
			}

		} catch (err) {
			console.log(feature.get('description') + " - " + err);
		}
	}
	if (!intersection_found) {
		$('#dataPanel').append("No intersection found with any CityGML<br/>\n");
	}
}

draw.on('drawend', function(e) {
	$('#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();
	var gsk3_coords = "";
	var wgs84_coords = "";
	var n = coords.length - 1;
	for (var i = 0; i < n; i++) {
		var wgs84_coord = coords[i];
		wgs84_coords += "(" + wgs84_coord[1] + "," + wgs84_coord[0] + ")<br/>";
		var gsk3_coord = ol.proj.transform(coords[i], ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:31467'))
		gsk3_coords += "(" + gsk3_coord[0] + "," + gsk3_coord[1] + ")<br/>";
	}
	$('#dataPanel').append("WGS84 Coordinates<br/>");
	$('#dataPanel').append(wgs84_coords + "<br/>\n");
	$('#dataPanel').append("GSK3 Coordinates<br/>");
	$('#dataPanel').append(gsk3_coords + "<br/>\n");
	$('#dataPanel').append("Area" + "<br/>\n");
	$('#dataPanel').append((Math.round(area / 1000) / 10).toString() + " ha<br/><br/>\n");
	findIntersections();
});

map.addInteraction(draw);
$('#reset').click(function() {
	$('#dataPanel').empty();
	polygons.clear();
});