Skip to content

GitLab

Commit 14e8c601 authored by Eric Duminil's avatar Eric Duminil
Browse files

RegionChooserJS: Closure to avoid using too many global variables.

parent e9082330
Hide whitespace changes
Inline Side-by-side
src/eu/simstadt/regionchooser/RegionChooserBrowser.java
View file @ 14e8c601
......@@ -159,7 +159,7 @@ private Path citygmlPath(String project, String citygml) {
}
public void importNovaFactoryBoundingBoxes() throws IOException {
JSObject novafactoryVectors = (JSObject) webEngine.executeScript("novafactory_vectors");
JSObject regionChooserJS = (JSObject) webEngine.executeScript("regionChooser");
BufferedReader nf_csv = new BufferedReader(new InputStreamReader(
RegionChooserFX.class.getResourceAsStream("website/data/novafactory_products.csv")));
nf_csv.readLine();
......@@ -171,7 +171,7 @@ public void importNovaFactoryBoundingBoxes() throws IOException {
String[] srs = values[3].split(" ");
String epsgId = srs[srs.length - 1];
// System.out.println(product);
novafactoryVectors.call("addNovaFactoryProduct", values[8], values[9], values[10], values[11], product,
regionChooserJS.call("addNovaFactoryProduct", values[8], values[9], values[10], values[11], product,
epsgId);
}
nf_csv.close();
......@@ -192,9 +192,9 @@ public RegionChooserBrowser() {
webEngine.getLoadWorker().stateProperty().addListener(
(ObservableValue<? extends State> ov, State oldState, State newState) -> {
if (newState == State.SUCCEEDED) {
JSObject win = (JSObject) webEngine.executeScript("window");
win.setMember("fxapp", fxapp);
win.call("ready");
JSObject regionChooserJS = (JSObject) webEngine.executeScript("regionChooser");
regionChooserJS.setMember("fxapp", fxapp);
regionChooserJS.call("ready");
try {
fxapp.importNovaFactoryBoundingBoxes();
} catch (Exception ex) {
......
src/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js
View file @ 14e8c601
//TODO: Clean up code and don't leave so many global variables
var reset_btn = $('#reset')[0];
var dataPanel = $('#dataPanel');
var wgs84Sphere = new ol.Sphere(6378137);
proj4.defs("EPSG:3068", "+proj=cass +lat_0=52.41864827777778 +lon_0=13.62720366666667 +x_0=40000 +y_0=10000 +ellps=bessel +datum=potsdam +units=m +no_defs"); // http://spatialreference.org/ref/epsg/3068/proj4js/
proj4.defs("EPSG:32632", "+proj=utm +zone=32 +ellps=WGS84 +datum=WGS84 +units=m +no_defs"); // http://spatialreference.org/ref/epsg/32632/proj4js/
proj4.defs("EPSG:31463", "+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/31463/proj4js/
......@@ -15,330 +8,341 @@ proj4.defs("EPSG:2263", "+proj=lcc +lat_1=41.03333333333333 +lat_2=40.6666666666
//NOTE: Corrected version from https://oegeo.wordpress.com/2008/05/20/note-to-self-the-one-and-only-rd-projection-string/
proj4.defs("EPSG:28992", "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.999908 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs <>"); //
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
});
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 regionChooser = (function(){
var publicScope = {};
var reset_btn = $('#reset')[0];
var dataPanel = $('#dataPanel');
var wgs84Sphere = new ol.Sphere(6378137);
var osm_layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
}
var kml_layer = new ol.layer.Vector({
source : kml_source,
style : polygon_style('#777777', 0.2)
});
var kml_source = new ol.source.KML({
projection : ol.proj.get('EPSG:3857'),
url : 'data/citygml_hulls.kml',
extractAttributes : false,
extractStyles : false
});
var intersections = new ol.source.Vector();
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 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)'
var kml_layer = new ol.layer.Vector({
source : kml_source,
style : polygon_style('#777777', 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)'
})
})
})
});
var novafactory_vectors = new ol.source.Vector({
features : []
});
novafactory_vectors.addNovaFactoryProduct = function(xmin, ymin, xmax, ymax, name, epsgId) {
var box = new ol.geom.Polygon(
[ [ [ xmin, ymin ], [ xmin, ymax ], [ xmax, ymax ], [ xmax, ymin ], [ xmin, ymin ] ] ]);
box.transform('EPSG:' + epsgId, 'EPSG:3857');
var feature = new ol.Feature({
geometry : box,
name : name,
});
feature["geoJSON"] = geoJSONformat.writeFeatureObject(feature);
feature["area"] = feature.getGeometry().getArea();
feature["description"] = "novaFACTORY>" + name;
feature["available"] = true;
feature["source"] = "NovaFACTORY";
this.addFeature(feature);
};
var novafactory_layer = new ol.layer.Vector({
source : novafactory_vectors,
style : polygon_style('#ff7700', 0.1)
});
var map = new ol.Map({
target : 'map',
layers : [ osm_layer, kml_layer, novafactory_layer, intersections_layer ],
interactions : ol.interaction.defaults({
keyboard : true
})
});
var geoJSONformat = new ol.format.GeoJSON();
kml_layer.addEventListener("change", function() {
map.getView().fitExtent(kml_source.getExtent(), (map.getSize()));
});
function updateGMLPolygons() {
kml_source.forEachFeature(function(feature) {
novafactory_vectors = new ol.source.Vector({
features : []
});
publicScope.addNovaFactoryProduct = function(xmin, ymin, xmax, ymax, name, epsgId) {
var box = new ol.geom.Polygon(
[ [ [ xmin, ymin ], [ xmin, ymax ], [ xmax, ymax ], [ xmax, ymin ], [ xmin, ymin ] ] ]);
box.transform('EPSG:' + epsgId, 'EPSG:3857');
var feature = new ol.Feature({
geometry : box,
name : name,
});
feature["geoJSON"] = geoJSONformat.writeFeatureObject(feature);
feature["area"] = feature.getGeometry().getArea();
var project = feature.get("project");
var name = feature.get("name");
feature["description"] = project + ">" + name;
feature["source"] = "CityGML";
var citygmlHere;
if (fromJavaFX) {
citygmlHere = fxapp.checkIfCityGMLSAreAvailable(project, name);
}
feature["available"] = citygmlHere;
feature["description"] = "novaFACTORY>" + name;
feature["available"] = true;
feature["source"] = "NovaFACTORY";
novafactory_vectors.addFeature(feature);
};
var novafactory_layer = new ol.layer.Vector({
source : novafactory_vectors,
style : polygon_style('#ff7700', 0.1)
});
}
// 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,
var map = new ol.Map({
target : 'map',
layers : [ osm_layer, kml_layer, novafactory_layer, intersections_layer ],
interactions : ol.interaction.defaults({
keyboard : true
})
});
var geoJSONformat = new ol.format.GeoJSON();
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();
var project = feature.get("project");
var name = feature.get("name");
feature["description"] = project + ">" + name;
feature["source"] = "CityGML";
var citygmlHere;
if (fromJavaFX) {
citygmlHere = publicScope.fxapp.checkIfCityGMLSAreAvailable(project, name);
}
feature["available"] = citygmlHere;
});
}
// 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 : '#ffcc33'
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() {
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;
var fromJavaFX = false; //Can be overwritten later if launched from JavaFX
draw.on('drawstart', function(evt) {
sketch = evt.feature;
reset_btn.disabled = false;
updateGMLPolygons();
});
var sourceProj = map.getView().getProjection();
function findIntersections() {
var sketch_area = sketch.getGeometry().getArea();
var poly1 = geoJSONformat.writeFeatureObject(sketch);
var intersection_found = false;
intersections.clear();
function findIntersection(feature) {
try {
var jsonIntersection = turf.intersect(poly1, feature["geoJSON"]);
if (undefined !== jsonIntersection) {
if (!intersection_found) {
dataPanel.append("Intersection found with :<br/>\n");
intersection_found = true;
}
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 / sketch_area * 100);
intersections.addFeature(intersection);
var description;
if (feature["available"]) {
description = "<a href=\"#\" onclick=\"downloadRegionFrom" + feature["source"] + "(" + i
+ ");return false;\">" + feature["description"] + "</a>";
// console.log(description);
} else {
description = feature['description'];
}
featureOverlay.setMap(map);
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;
var fromJavaFX = false; //Can be overwritten later if launched from JavaFX
dataPanel.append(description + " (" + citygml_percentage + "%");
if (sketch_percentage == 100) {
dataPanel.append(", all inside");
draw.on('drawstart', function(evt) {
sketch = evt.feature;
reset_btn.disabled = false;
updateGMLPolygons();
});
var sourceProj = map.getView().getProjection();
function findIntersections() {
var sketch_area = sketch.getGeometry().getArea();
var poly1 = geoJSONformat.writeFeatureObject(sketch);
var intersection_found = false;
intersections.clear();
function findIntersection(feature) {
try {
var jsonIntersection = turf.intersect(poly1, feature["geoJSON"]);
if (undefined !== jsonIntersection) {
if (!intersection_found) {
dataPanel.append("Intersection found with :<br/>\n");
intersection_found = true;
}
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 / sketch_area * 100);
intersections.addFeature(intersection);
var description;
if (feature["available"]) {
description = "<a href=\"#\" onclick=\"regionChooser.downloadRegionFrom" + feature["source"] + "(" + i
+ ");return false;\">" + feature["description"] + "</a>";
// console.log(description);
} else {
description = feature['description'];
}
dataPanel.append(description + " (" + citygml_percentage + "%");
if (sketch_percentage == 100) {
dataPanel.append(", all inside");
}
dataPanel.append(")<br/>\n");
}
dataPanel.append(")<br/>\n");
}
} catch (err) {
console.log(feature.get('description') + " - " + err);
} catch (err) {
console.log(feature.get('description') + " - " + err);
}
i++;
}
var i = 0;
novafactory_vectors.forEachFeature(findIntersection);
i = 0;
kml_source.forEachFeature(findIntersection);
if (!intersection_found) {
dataPanel.append("No intersection found with any CityGML or NovaFactory product<br/>\n");
}
i++;
}
var i = 0;
novafactory_vectors.forEachFeature(findIntersection);
i = 0;
kml_source.forEachFeature(findIntersection);
if (!intersection_found) {
dataPanel.append("No intersection found with any CityGML or NovaFactory product<br/>\n");
publicScope.downloadRegionFromCityGML = function(i) {
// TODO: Disable all links
// TODO: DRY
var feature = kml_source.getFeatures()[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.");
publicScope.fxapp.downloadRegionFromCityGML(sketchAsWKT(srsName), feature.get("project"), feature.get("name"), srsName);
var end = new Date().getTime();
var time = end - start;
console.log('DL Execution time: ' + time);
setTimeout(function() {
$("html").removeClass("wait");
dataPanel.append("Done<br/>\n");
}, 100);
} else {
var msg = "ERROR : Unknown coordinate system : \"" + srsName + "\". Cannot extract any region";
console.log(msg);
dataPanel.append(msg + "<br/>\n");
}
}, 100);
}
}
function downloadRegionFromCityGML(i) {
// TODO: Disable all links
// TODO: DRY
var feature = kml_source.getFeatures()[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.");
fxapp.downloadRegionFromCityGML(sketchAsWKT(srsName), feature.get("project"), feature.get("name"), srsName);
var end = new Date().getTime();
var time = end - start;
console.log('DL Execution time: ' + time);
setTimeout(function() {
$("html").removeClass("wait");
dataPanel.append("Done<br/>\n");
}, 100);
} else {
var msg = "ERROR : Unknown coordinate system : \"" + srsName + "\". Cannot extract any region";
console.log(msg);
dataPanel.append(msg + "<br/>\n");
}
}, 100);
}
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();
if (!fromJavaFX) {
var wgs84_coords = "";
var n = coords.length;
for (var i = 0; i < n; i++) {
var wgs84_coord = coords[i];
// wgs84_coords += "regionPolygon.add(new Coord(" + wgs84_coord[1] +
// "," + wgs84_coord[0] + "));<br/>";
wgs84_coords += "(" + wgs84_coord[1] + "," + wgs84_coord[0] + ")<br/>";
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();
if (!fromJavaFX) {
var wgs84_coords = "";
var n = coords.length;
for (var i = 0; i < n; i++) {
var wgs84_coord = coords[i];
// wgs84_coords += "regionPolygon.add(new Coord(" + wgs84_coord[1] +
// "," + wgs84_coord[0] + "));<br/>";
wgs84_coords += "(" + wgs84_coord[1] + "," + wgs84_coord[0] + ")<br/>";
}
dataPanel.append("WGS84 Coordinates<br/>");
dataPanel.append(wgs84_coords + "<br/>\n");
}
dataPanel.append("WGS84 Coordinates<br/>");
dataPanel.append(wgs84_coords + "<br/>\n");
dataPanel.append("Area" + "<br/>\n");
dataPanel.append((Math.round(area / 1000) / 10).toString() + " ha<br/><br/>\n");
findIntersections();
// var end = new Date().getTime();
// var time = end - start;
// console.log('Execution time: ' + time);
}
dataPanel.append("Area" + "<br/>\n");
dataPanel.append((Math.round(area / 1000) / 10).toString() + " ha<br/><br/>\n");
findIntersections();
// var end = new Date().getTime();
// var time = end - start;
// console.log('Execution time: ' + time);
}
draw.on('drawend', function() {
displayInfo();
draw.setActive(false);
});
$('#reset').click(function() {
try {
draw.finishDrawing();
} finally {
dataPanel.empty();
draw.on('drawend', function() {
displayInfo();
draw.setActive(false);
});
$('#reset').click(function() {
try {
draw.finishDrawing();
} finally {
dataPanel.empty();
$("html").removeClass("wait");
draw.setActive(true);
featureOverlay.getFeatures().clear();
intersections.clear();
reset_btn.disabled = true;
focusOnMap();
}
});
novafactory_layer.downloadFinished = function() {
// FIXME: Weird <br>s are inserted between lines
// FIXME: Doesn't stop waiting cursor
$("html").removeClass("wait");
draw.setActive(true);
featureOverlay.getFeatures().clear();
intersections.clear();
reset_btn.disabled = true;
focusOnMap();
setTimeout(function() {
dataPanel.append("NovaFactory : DONE <br/>\n");
}, 100);
};
novafactory_layer.updateStatus = function(status) {
dataPanel.append("NovaFactory : " + status + "<br/>\n");
};
novafactory_layer.selectSaveFile = function(zipFilename) {
publicScope.fxapp.extractZIPtoGML(zipFilename);
};
publicScope.downloadRegionFromNovaFACTORY = function(i) {
$("html").addClass("wait");
var feature = novafactory_vectors.getFeatures()[i];
// Waiting 100ms in order to let the cursor change
setTimeout(function() {
publicScope.fxapp.downloadRegion(sketchAsWKT(), feature.get('name'), novafactory_layer);
}, 100);
}
});
novafactory_layer.downloadFinished = function() {
// FIXME: Weird <br>s are inserted between lines
// FIXME: Doesn't stop waiting cursor
$("html").removeClass("wait");
setTimeout(function() {
dataPanel.append("NovaFactory : DONE <br/>\n");
}, 100);
};
novafactory_layer.updateStatus = function(status) {
dataPanel.append("NovaFactory : " + status + "<br/>\n");
};
novafactory_layer.selectSaveFile = function(zipFilename) {
fxapp.extractZIPtoGML(zipFilename);
};
function downloadRegionFromNovaFACTORY(i) {
$("html").addClass("wait");
var feature = novafactory_vectors.getFeatures()[i];
// Waiting 100ms in order to let the cursor change
setTimeout(function() {
fxapp.downloadRegion(sketchAsWKT(), feature.get('name'), novafactory_layer);
}, 100);
}
function sketchAsWKT(srsName) {
srsName = (typeof srsName === 'undefined') ? 'EPSG:4326' : srsName;
var wktFormat = new ol.format.WKT();
return wktFormat.writeFeature(sketch, {
dataProjection : ol.proj.get(srsName),
featureProjection : ol.proj.get('EPSG:3857')
});
}
function focusOnMap() {
$('#map').focus();
// $('#map').scrollIntoView();
}
// Executed by JavaFX when whole page is loaded.
window.ready = function() {
fromJavaFX = true;
console.log = function(message){
fxapp.log(message);
function sketchAsWKT(srsName) {
srsName = (typeof srsName === 'undefined') ? 'EPSG:4326' : srsName;
var wktFormat = new ol.format.WKT();
return wktFormat.writeFeature(sketch, {
dataProjection : ol.proj.get(srsName),
featureProjection : ol.proj.get('EPSG:3857')
});
}
function focusOnMap() {
$('#map').focus();
// $('#map').scrollIntoView();
}
publicScope.fxapp = undefined;
// Executed by JavaFX when whole page is loaded.
publicScope.ready = function() {
fromJavaFX = true;
console.log = function(message){
publicScope.fxapp.log(message);
}
console.log("READY!");
}
console.log("READY!");
}
focusOnMap();
\ No newline at end of file
focusOnMap();
return publicScope;
})();
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal