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("
\n");
}
var button = document.getElementById("download_region_button");
if (button){ // Region might have been modified since download start
button.disabled = false;
}
}
publicScope.downloadFromSelectedCityGMLs = function() {
var features = getSelectedGMLs();
var project = features[0].get("project");
var srsName = features[0].get("srsName");
if (!features.every( f => f.get("project") === project)){
dataPanel.prepend("
Sorry, the CityGML files should all belong to the same project.
\n");
return;
}
if (!features.every( f => f.get("srsName") === srsName)){
dataPanel.prepend("
Sorry, the CityGML files should all be written with the same coordinate system.
\n");
}
var citygmlNames = features.map(f => f.get("name"));
if (proj4.defs(srsName)){
console.log("Selected region is written in " + srsName + " coordinate system.");
fxapp.downloadRegionFromCityGMLs(sketchAsWKT(srsName), project, citygmlNames.join(";"), srsName);
} else {
var msg = "ERROR : Unknown coordinate system : \"" + srsName + "\". Cannot extract any region";
console.log(msg);
dataPanel.append(msg + " \n");
}
}
function displayInfo() {
dataPanel.empty();
var geom = sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326');
var coordinates = geom.getLinearRing(0).getCoordinates();
var area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
//NOTE: Could show m², ha or km² depending on magnitude
dataPanel.append("
\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");
//TODO: Show tooltip above.
dataPanel.append("
\n");
document.getElementById('importWKT').addEventListener('submit', importWKT);
}
importWKT = function(e){
e.preventDefault(); // to avoid refresh
//TODO: DRY, possibly with other events
//TODO: Allow WKT as parameter for GUI?
var wktPolygon = document.getElementById("wktPolygon").value;
console.log("Try to import WKT geometry : " + wktPolygon);
var wktFormat = new ol.format.WKT();
try{
var feature = wktFormat.readFeature(wktPolygon, {
dataProjection : ol.proj.get('EPSG:4326'),
featureProjection : ol.proj.get('EPSG:3857')
});
} catch (e){
console.error("Couldn't import geometry!");
dataPanel.prepend("
Couldn't import geometry!
\n");
return false;
}
// Assuming the linear ring is closed
var coordinatesCount = feature.getGeometry().getLinearRing(0).getCoordinates().length - 1;
if (coordinatesCount < 2){
console.error("Too few points!");
dataPanel.prepend("
There should be at least 2 points in WKT polygon
\n");
return false;
}
sketch = feature;
updateGMLPolygons();
drawnLayer.getFeatures().clear();
intersections.clear();
drawnLayer.addFeature(feature);
map.getView().fitExtent(feature.getGeometry().getExtent(), map.getSize());
displayInfo();
draw.setActive(false);
//TODO: Test intersection with holes
console.log("Import was succesful!");
dataPanel.prepend("
WKT Polygon succesfully imported!
");
}
// Executed by JavaFX when whole page is loaded.
publicScope.ready = function() {
updateGMLPolygons();
displayHelp();
document.documentElement.className = ''; // Stop waiting
console.log("Ready!");
}
publicScope.selectAllOrNone = function(allOrNone) {
document.querySelectorAll("input.select_citygml").forEach(c => c.checked = allOrNone);
publicScope.isDownloadPossible();
}
publicScope.selectRepository = function() {
fxapp.selectRepository();
}
publicScope.copyCoordinatesToClipboard = function(){
var geom = sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326');
var wgs84Coords = geom.getLinearRing(0).getCoordinates();
var wktPolygon = "POLYGON((";
var precision = 6; // ~ 10 cm precision
wktPolygon += wgs84Coords.map(([lon, lat]) => lon.toFixed(precision) + " " + lat.toFixed(precision)).join(", ");
utils.copyToClipboard(wktPolygon + "))", dataPanel);
}
publicScope.showRepositoryName = function(path) {
document.getElementById("repo_path").textContent = path;
}
focusOnMap();
//var regionChooser = publicScope; //NOTE: In order to open closure. For debugging
return publicScope;
})();