const styles = {}; styles.original = utils.polygon_style('#447744', 0.2); styles.highlighted = utils.polygon_style("#ff44a2", 0.7); styles.selected = utils.polygon_style("#ffff00", 0.8); const regionChooser = (function(){ //TODO: Somehow split in classes. This file is getting too big and mixed var publicScope = {}; const fromJavaFX = navigator.userAgent.indexOf('JavaFX') !== -1; const dataPanel = $('#dataPanel'); const wgs84Sphere = new ol.Sphere(6378137); var features_by_project; publicScope.init = function(){ //NOTE: Only called from JavaFX. At startup, or when Repo has been changed. 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() }); var kml_source = utils.read_kml(fromJavaFX ? undefined : 'data/citygml_hulls.kml'); var kml_layer = new ol.layer.Vector({ source : kml_source, style : styles.original }); 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); kml_source.addFeature(feature); dataPanel.append('.'); srsName = feature.get("srsName"); if (proj4.defs(srsName) === undefined){ console.warn(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 }) }); const geoJsonFormat = new ol.format.GeoJSON(); const kmlFormat = new ol.format.KML({extractStyles: false}); kml_source.addEventListener("addfeature", 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"; feature["status"] = "original"; }); var features = Array.from(kml_source.getFeatures()); // Sort projects features.sort((a, b) => a.project.localeCompare(b.project)); features_by_project = utils.groupBy(features, "project"); // Sort CityGMLs inside each project Object.values(features_by_project).forEach(features => features.sort((a, b) => a.name.localeCompare(b.name))); } // 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 drawnLayer = 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' }) }) }) }); drawnLayer.setMap(map); drawnLayer.getFeatures().on('add', function(event) { var feature = event.element; feature.on("change", function() { displayInfo(); }); }); var modify = new ol.interaction.Modify({ features : drawnLayer.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 : drawnLayer.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); li = document.createElement('li'); li.feature = feature; li.onmouseover = function(){ regionChooser.highlightPolygon(this.feature) }; li.onmouseout = function(){ regionChooser.resetHighlight(this.feature) }; let label = li.appendChild(document.createElement('label')); var text = feature.name; let checkbox = document.createElement('input'); checkbox.type = 'checkbox' checkbox.className = "select_citygml"; checkbox.feature = feature; checkbox.setAttribute('onclick', "regionChooser.isDownloadPossible()"); text += " (" + citygml_percentage + "%"; if (sketch_percentage == 100) { text += ", all inside"; } label.textContent = text + ")\n"; label.prepend(checkbox); // append to DOM element, not to jQuery object dataPanel[0].appendChild(li); } publicScope.highlightPolygon = function(feature) { feature.setStyle(styles.highlighted); } publicScope.resetHighlight = function(feature) { refreshStyle(feature); } refreshStyle = function(feature, status){ if (status){ feature.status = status; } feature.setStyle(styles[feature.status]); } publicScope.isDownloadPossible = function(){ kml_source.getFeatures().forEach(f => refreshStyle(f, "original")); selectedFeatures = getSelectedGMLs(); selectedFeatures.forEach(f => refreshStyle(f, "selected")); document.getElementById("download_region_button").disabled = (selectedFeatures.length == 0); } function getSelectedGMLs(){ return Array.from(document.querySelectorAll("input.select_citygml")).filter(c => c.checked).map(c => c.feature); } 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(); 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("