var regionChooser = (function(){ //TODO: Somehow split in classes. This file is getting too big and mixed var publicScope = {}; var fromJavaFX = navigator.userAgent.indexOf('JavaFX') !== -1; var dataPanel = $('#dataPanel'); var wgs84Sphere = new ol.Sphere(6378137); var gmlId; publicScope.init = function(){ //NOTE: Only called from JavaFX. At startup, or when Repo has been changed. gmlId = 0; kml_source.clear(); document.getElementById("select_repository").style.visibility = "visible"; } if (fromJavaFX){ document.documentElement.className = '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)' }) }) }); publicScope.addCityGmlHull = function(kmlString) { options = {featureProjection: ol.proj.get('EPSG:3857')}; feature = kmlFormat.readFeature(kmlString, options); feature.setId(gmlId++); kml_source.addFeature(feature); dataPanel.append('.'); srsName = feature.get("srsName"); if (proj4.defs(srsName) === undefined){ console.warning(srsName + " isn't defined by Proj4js!") } }; var map = new ol.Map({ target : 'map', layers : [ osm_layer, kml_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(); feature["project"] = feature.get("project"); feature["name"] = feature.get("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); //TODO: Rename to Javascript naming convention (CamelCase). 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 showLinkToDownload(feature, jsonIntersection, polygonArea){ 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 / polygonArea * 100); intersections.addFeature(intersection); var link = '
  • ' // TODO: If possible, highlight the corresponding polygon when hovering above a name. link += ''; link += " (" + citygml_percentage + "%"; if (sketch_percentage == 100) { link += ", all inside"; } dataPanel.append(link + ")\n"); } publicScope.isDownloadPossible = function(){ var checkedBoxes = Array.from(document.querySelectorAll("input.select_citygml")).filter(c => c.checked); document.getElementById("download_region_button").disabled = (checkedBoxes.length == 0); } function findIntersection(feature, polygon) { try { return turf.intersect(polygon, feature["geoJSON"]); } catch (err) { console.log(feature.get('name') + " - " + err); } } function findIntersections() { var polygon = geoJsonFormat.writeFeatureObject(sketch); var polygonArea = sketch.getGeometry().getArea(); var intersection_found = false; intersections.clear(); //NOTE: getFeatures seems to not be sorted anymore. :-/ features_by_project = groupBy(kml_source.getFeatures(), "project"); Object.keys(features_by_project).forEach(function(project) { features = features_by_project[project]; features_and_intersections = features.map(f=> [f, findIntersection(f,polygon)]).filter(l => l[1] !== undefined); if (features_and_intersections.length > 0){ intersection_found = true; dataPanel.append("

    " + project); features_and_intersections.forEach(l => showLinkToDownload(l[0], l[1], polygonArea)); } }); if (intersection_found) { document.getElementById("download_region").style.visibility = 'visible'; } else { document.getElementById("download_region").style.visibility = 'hidden'; dataPanel.append("No intersection found with any CityGML file.
    \n"); } } publicScope.display = function(text){ dataPanel.append(text + "
    \n"); } publicScope.downloadRegionFromCityGMLs = function(checkbox_ids) { var features = checkbox_ids.map(checkbox_id => { var i = Number(checkbox_id.replace("citygml_", "")); return kml_source.getFeatureById(i); }) var project = features[0].get("project"); //TODO: Check all the same var srsName = features[0].get("srsName"); //TODO: Check all the same var citygmlNames = features.map(f => f.get("name")); // Waiting 100ms in order to let the cursor change setTimeout(function() { var start = new Date().getTime(); if (proj4.defs(srsName)){ document.documentElement.className = 'wait'; console.log("Selected region is written in " + srsName + " coordinate system."); try { fxapp.downloadRegionFromCityGMLs(sketchAsWKT(srsName), project, citygmlNames.join(";"), srsName); dataPanel.append("

    Done!


    \n"); } catch (e) { console.warning("ERROR : " + e); dataPanel.append("

    Some problem occured!


    \n"); } var end = new Date().getTime(); var time = end - start; console.log('Download Execution time: ' + (time / 1000).toFixed(3) + 's'); setTimeout(function() { resetDrawing(); document.getElementById("download_region_button").disabled = false; document.documentElement.className = ''; // Stop waiting }, 100); } else { var msg = "ERROR : Unknown coordinate system : \"" + srsName + "\". Cannot extract any region"; console.log(msg); dataPanel.append(msg + "
    \n"); } }, 100); } function displayInfo() { 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 += "(" + wgs84_coord[1] + "," + wgs84_coord[0] + ")
    "; } dataPanel.append("WGS84 Coordinates
    "); dataPanel.append(wgs84_coords + "
    \n"); } //NOTE: Could show m², ha or km² depending on magnitude dataPanel.append("

    Area : " + (area / 10000).toFixed(1) + " ha\n"); dataPanel.append('\n'); findIntersections(); } 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(); document.documentElement.className = ''; // Stop waiting draw.setActive(true); featureOverlay.getFeatures().clear(); intersections.clear(); focusOnMap(); } } function sketchAsWKT(srsName) { var wktFormat = new ol.format.WKT(); return wktFormat.writeFeature(sketch, { dataProjection : ol.proj.get(srsName), featureProjection : ol.proj.get('EPSG:3857') }); } function focusOnMap() { document.getElementById("map").focus(); } var fxapp = undefined; publicScope.setFxApp = function(app){ fxapp = app; console.log = function(message){ fxapp.log(message); } console.warning = function(message){ fxapp.warning(message); } } groupBy = function(xs, key) { return xs.reduce(function(rv, x) { (rv[x[key]] = rv[x[key]] || []).push(x); return rv; }, {}); }; function displayHelp(){ dataPanel.empty(); dataPanel.append("

    Welcome to Region Chooser!

    \n"); dataPanel.append("You can draw a polygon on the map by clicking.
    \n"); dataPanel.append("You can add a new point to an existing edge by clicking and dragging.
    \n"); dataPanel.append("You can remove a point with SHIFT + clicking.
    \n"); dataPanel.append("You can cancel drawing with ESC or DEL.

    \n"); dataPanel.append("After drawing a polygon which intersects with at least one GML file,
    \n"); dataPanel.append("you can download the corresponding part by checking the
    \n"); dataPanel.append("desired filenames and clicking on 'Download' button.
    \n"); dataPanel.append("
    \n"); dataPanel.append("More info is available in the "); dataPanel.append("SimStadt documentation
    \n"); } // Executed by JavaFX when whole page is loaded. publicScope.ready = function() { updateGMLPolygons(); displayHelp(); document.documentElement.className = ''; // Stop waiting console.log("READY!"); } publicScope.downloadFromSelectedCityGMLs = function() { var checkedBoxes = Array.from(document.querySelectorAll("input.select_citygml")).filter(c => c.checked); if (checkedBoxes.length === 0){ console.log("You should select at least one citygml, though."); } else{ document.getElementById("download_region_button").disabled = true; publicScope.downloadRegionFromCityGMLs(checkedBoxes.map(c => c.id)); } } publicScope.checkCityGMLS = function(allOrNone) { document.querySelectorAll("input.select_citygml").forEach(c => c.checked = allOrNone); publicScope.isDownloadPossible(); } publicScope.selectRepository = function() { fxapp.selectRepository(); } publicScope.showRepositoryName = function(path) { document.getElementById("repo_path").textContent = path; } focusOnMap(); //var regionChooser = publicScope; //NOTE: In order to open closure. For debugging return publicScope; })();