//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 :
\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(")
\n"); } } catch (err) { console.log(feature.get('description') + " - " + err); } } if (!intersection_found) { $('#dataPanel').append("No intersection found with any CityGML
\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] + ")
"; 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] + ")
"; } $('#dataPanel').append("WGS84 Coordinates
"); $('#dataPanel').append(wgs84_coords + "
\n"); $('#dataPanel').append("GSK3 Coordinates
"); $('#dataPanel').append(gsk3_coords + "
\n"); $('#dataPanel').append("Area" + "
\n"); $('#dataPanel').append((Math.round(area / 1000) / 10).toString() + " ha

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