diff --git a/src/eu/simstadt/regionchooser/RegionChooserBrowser.java b/src/eu/simstadt/regionchooser/RegionChooserBrowser.java index fc5df7c8f205dd6c036913871c722749943da5b7..f493f1e0aa6bc0a93792cca94b94bce54d1c6065 100644 --- a/src/eu/simstadt/regionchooser/RegionChooserBrowser.java +++ b/src/eu/simstadt/regionchooser/RegionChooserBrowser.java @@ -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) { diff --git a/src/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js b/src/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js index af1c0fb40e3143921fc68a73e26d30e63b8b8477..e00a354bdb50a24c51fbde91c467b92056af34b7 100644 --- a/src/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js +++ b/src/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js @@ -1,10 +1,3 @@ -//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