//TODO: Add zoom to extent as control //TODO: Add keyboard controls . ol.interaction.KeyboardPan //TODO: Don't allow multiple sketch //TODO: Add text to citygml vector //TODO: Try to leave everything in 4326 //TODO: Gray buttons until polygon is closed var reset_btn = $('#reset')[0]; var send_btn = $('#send')[0]; 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 ] }), }) }); kml_layer.addEventListener("change", function(event) { map.getView().fitExtent(kml_source.getExtent(), (map.getSize())); }); 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.5)' }) }) }); var map = new ol.Map({ target : 'map', layers : [ osm_layer, kml_layer, intersections_layer ], }); // 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(event) { 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); draw = new ol.interaction.Draw({ features : featureOverlay.getFeatures(), type : 'Polygon' }); map.addInteraction(draw); var sketch; draw.on('drawstart', function(evt) { sketch = evt.feature; reset_btn.disabled = false; }); var sourceProj = map.getView().getProjection(); var geoJSONformat = new ol.format.GeoJSON(); function findIntersections() { var features = kml_source.getFeatures(); var sketch_area = sketch.getGeometry().getArea(); var poly1 = geoJSONformat.writeFeatureObject(sketch); var intersection_found = false; intersections.clear(); for (var i = 0; i < features.length; i++) { var feature = features[i]; var poly2 = geoJSONformat.writeFeatureObject(feature); 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); 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); intersections.addFeature(intersection); $('#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"); } } 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(); 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(); var end = new Date().getTime(); var time = end - start; console.log('Execution time: ' + time); } draw.on('drawend', function(e) { displayInfo(); send_btn.disabled = false; }); $('#reset').click(function() { try { draw.finishDrawing(); } finally { $('#dataPanel').empty(); featureOverlay.getFeatures().clear(); intersections.clear(); reset_btn.disabled = true; send_btn.disabled = true; } }); $('#send').click(function() { var wktFormat = new ol.format.WKT(); fxapp.downloadRegion(wktFormat.writeFeature(sketch, { dataProjection : ol.proj.get('EPSG:4326'), featureProjection : ol.proj.get('EPSG:3857') })); });