var regionChooser = (function(){
var publicScope = {};
var fromJavaFX = navigator.userAgent.indexOf('JavaFX') !== -1;
//NOTE: Could do without jQuery
var dataPanel = $('#dataPanel');
var wgs84Sphere = new ol.Sphere(6378137);
var gmlId = 0;
if (fromJavaFX){
$("html").addClass("wait");
}
// Hash function. For testing purposes in browser (no Feature ID is available)
const cyrb53 = (str, seed = 0) => {
let h1 = 0xdeadbeef ^ seed,
h2 = 0x41c6ce57 ^ seed;
for (let i = 0, ch; i < str.length; i++) {
ch = str.charCodeAt(i);
h1 = Math.imul(h1 ^ ch, 2654435761);
h2 = Math.imul(h2 ^ ch, 1597334677);
}
h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
return 4294967296 * (2097151 & h2) + (h1 >>> 0);
};
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") || "EPSG:31467";
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: Add checkbox + label +
// TODO: Add submit.
// TODO: If possible, highlight the corresponding polygon when hovering above a name.
console.log("Feature name : "+ feature["name"]);
console.log("Feature ID : "+ feature.getId());
if (fromJavaFX) {
link += '';
} else {
h = cyrb53(feature['name']);
link += '';
}
link += " (" + citygml_percentage + "%";
if (sketch_percentage == 100) {
link += ", all inside";
}
dataPanel.append(link + ")\n");
}
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").style.visibility = 'visible';
}
else {
document.getElementById("download").style.visibility = 'hidden';
dataPanel.append("No intersection found with any CityGML file. \n");
}
}
publicScope.display = function(text){
dataPanel.append(text + " \n");
}
publicScope.downloadRegionFromCityGML = function(i) {
// TODO: Disable all links
// TODO: DRY
var feature = kml_source.getFeatureById(i);
// Waiting 100ms in order to let the cursor change
setTimeout(function() {
var start = new Date().getTime();
var srsName = feature.get("srsName") || "EPSG:31467";
if (proj4.defs(srsName)){
$("html").addClass("wait");
console.log("Selected region is written in " + srsName + " coordinate system.");
try {
fxapp.downloadRegionFromCityGML(sketchAsWKT(srsName), feature.get("project"), feature.get("name"), srsName);
dataPanel.append("
Done!
\n");
} catch (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() {
$("html").removeClass("wait");
}, 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");
}
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 a GML file, you can download the corresponding part by clicking on the filename. \n");
}
// Executed by JavaFX when whole page is loaded.
publicScope.ready = function() {
updateGMLPolygons();
displayHelp();
$("html").removeClass("wait");
console.log("READY!");
}
publicScope.clickety_click = function() {
console.log("You clicked pretty well");
var checkedBoxes = Array.from(document.querySelectorAll("input.select_citygml")).filter(x => x.checked);
if (checkedBoxes.length === 0){
console.log("You should select at least one citygml, though.");
} else{
checkedBoxes.forEach(x => {
console.log("Nice! You checked Citygml " + x.id)
});
}
}
focusOnMap();
//var regionChooser = publicScope; //NOTE: In order to open closure. For debugging
return publicScope;
})();