Skip to content
GitLab
Commit c548ba99 authored by duminil's avatar duminil
Browse files

Proof of concept for JavaFX Region Chooser

parent 9b99ce4b
Show whitespace changes
Inline Side-by-side
src/eu/simstadt/regionchooser/RegionChooserFX.java 0 → 100644
View file @ c548ba99
package eu.simstadt.regionchooser;
import java.nio.file.Paths;
import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker.State;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.layout.Region;
import javafx.scene.paint.Color;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;
public class RegionChooserFX extends Application
{
private Scene scene;
@Override
public void start(Stage stage) {
// create the scene
stage.setTitle("RegionChooserJavaFX");
scene = new Scene(new Browser(), 1024, 768, Color.web("#666970"));
stage.setScene(scene);
scene.getStylesheets().add("webviewsample/BrowserToolbar.css");
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
class Browser extends Region
{
public class JavaApp
{
public void downloadRegion(String wktPolygon) {
System.out.println("FROM JAVA : DO SOMETHING with " + wktPolygon);
}
}
final WebView browser = new WebView();
final WebEngine webEngine = browser.getEngine();
public Browser() {
//apply the styles
getStyleClass().add("browser");
// load the web page
String url = "file://" + Paths.get("../RegionChooser/website/index.html").toAbsolutePath().toString();
webEngine.load(url);
// process page loading
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", new JavaApp());
}
});
//add the web view to the scene
getChildren().add(browser);
}
@Override
protected void layoutChildren() {
double w = getWidth();
double h = getHeight();
layoutInArea(browser, 0, 0, w, h, 0, HPos.CENTER, VPos.CENTER);
}
@Override
protected double computePrefWidth(double height) {
return 900;
}
@Override
protected double computePrefHeight(double width) {
return 600;
}
}
website/index.html
View file @ c548ba99
...@@ -34,7 +34,8 @@ ...@@ -34,7 +34,8 @@
</div> </div>
<div id="map" class="map"></div> <div id="map" class="map"></div>
<div id="side"> <div id="side">
<input id="reset" value="Reset" type="button" class="navi"/> <input id="reset" value="Reset" type="button" class="navi" disabled/>
<input id="send" value="Send" type="button" class="navi" disabled/>
<div id="dataPanel"> <div id="dataPanel">
</div> </div>
</div> </div>
......
website/script/simstadt_openlayers.js
View file @ c548ba99
//TODO: Add zoom to extent as control //TODO: Add zoom to extent as control
//TODO: Add keyboard controls . ol.interaction.KeyboardPan //TODO: Add keyboard controls . ol.interaction.KeyboardPan
//TODO: Many polygons? //TODO: Don't allow multiple sketch
//TODO: Movable corners
//TODO: Add text to citygml vector //TODO: Add text to citygml vector
//TODO: Try to leave everything in 4326
//TODO: Gray buttons until polygon is closed
var reset_btn = $('#reset')[0];
var send_btn = $('#send')[0];
proj4.defs("EPSG:31467", "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0" proj4.defs("EPSG:31467", "+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/31467/proj4js/ + " +ellps=bessel +datum=potsdam +units=m +no_defs"); // http://spatialreference.org/ref/epsg/31467/proj4js/
...@@ -34,10 +38,31 @@ var kml_layer = new ol.layer.Vector({ ...@@ -34,10 +38,31 @@ var kml_layer = new ol.layer.Vector({
}) })
}); });
var polygons = new ol.source.Vector(); kml_layer.addEventListener("change", function(event) {
map.getView().fitExtent(kml_source.getExtent(), (map.getSize()));
});
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.5)'
})
})
});
var map = new ol.Map({
target : 'map',
layers : [ osm_layer, kml_layer, intersections_layer ],
});
var polygons_layer = new ol.layer.Vector({ // The features are not added to a regular vector layer/source,
source : polygons, // 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({ style : new ol.style.Style({
fill : new ol.style.Fill({ fill : new ol.style.Fill({
color : 'rgba(255, 155, 51, 0.5)' color : 'rgba(255, 155, 51, 0.5)'
...@@ -54,41 +79,50 @@ var polygons_layer = new ol.layer.Vector({ ...@@ -54,41 +79,50 @@ var polygons_layer = new ol.layer.Vector({
}) })
}) })
}); });
featureOverlay.setMap(map);
kml_layer.addEventListener("change", function(event) { var selected_features = featureOverlay.getFeatures();
map.getView().fitExtent(kml_source.getExtent(), (map.getSize())); selected_features.on('add', function(event) {
var feature = event.element;
feature.on("change", function(event) {
displayInfo();
});
}); });
var map = new ol.Map({ var modify = new ol.interaction.Modify({
target : 'map', features : featureOverlay.getFeatures(),
layers : [ osm_layer, kml_layer, polygons_layer ], // 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({ draw = new ol.interaction.Draw({
source : polygons, features : featureOverlay.getFeatures(),
type : 'Polygon' type : 'Polygon'
}); });
map.addInteraction(draw);
var sketch;
draw.on('drawstart', function(evt) { draw.on('drawstart', function(evt) {
sketch = evt.feature; sketch = evt.feature;
reset_btn.disabled = false;
}); });
var sourceProj = map.getView().getProjection(); var sourceProj = map.getView().getProjection();
var geoJSONformat = new ol.format.GeoJSON();
function findIntersections() { function findIntersections() {
var geoJSONformat = new ol.format.GeoJSON();
var wktFormat = new ol.format.WKT();
var features = kml_source.getFeatures(); var features = kml_source.getFeatures();
var wgs84_sketch = /** @type {ol.geom.Polygon} */
(sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326'));
var sketch_area = sketch.getGeometry().getArea(); var sketch_area = sketch.getGeometry().getArea();
var poly1 = geoJSONformat.writeFeatureObject(new ol.Feature(wgs84_sketch)); var poly1 = geoJSONformat.writeFeatureObject(sketch);
var intersection_found = false; var intersection_found = false;
intersections.clear();
for (var i = 0; i < features.length; i++) { for (var i = 0; i < features.length; i++) {
var feature = features[i]; var feature = features[i];
var wgs84_citygml = /** @type {ol.geom.Polygon} */ var poly2 = geoJSONformat.writeFeatureObject(feature);
(feature.getGeometry().clone().transform(sourceProj, 'EPSG:4326'));
var poly2 = geoJSONformat.writeFeatureObject(new ol.Feature(wgs84_citygml));
try { try {
var jsonIntersection = turf.intersect(poly1, poly2); var jsonIntersection = turf.intersect(poly1, poly2);
if (undefined != jsonIntersection) { if (undefined != jsonIntersection) {
...@@ -96,27 +130,13 @@ function findIntersections() { ...@@ -96,27 +130,13 @@ function findIntersections() {
$('#dataPanel').append("Intersection found with :<br/>\n"); $('#dataPanel').append("Intersection found with :<br/>\n");
intersection_found = true; intersection_found = true;
} }
var intersection = geoJSONformat.readFeature(jsonIntersection, { var intersection = geoJSONformat.readFeature(jsonIntersection);
dataProjection : ol.proj.get('EPSG:4326'),
featureProjection : ol.proj.get('EPSG:3857')
});
console.log(intersection);
console.log(wktFormat.writeFeature(intersection, {
dataProjection : ol.proj.get('EPSG:4326'),
featureProjection : ol.proj.get('EPSG:3857')
}));
var intersectionArea = intersection.getGeometry().getArea(); var intersectionArea = intersection.getGeometry().getArea();
var citygmlArea = feature.getGeometry().getArea(); var citygmlArea = feature.getGeometry().getArea();
var citygml_percentage = Math.round(intersectionArea / citygmlArea * 100); var citygml_percentage = Math.round(intersectionArea / citygmlArea * 100);
var sketch_percentage = Math.round(intersectionArea / sketch_area * 100); var sketch_percentage = Math.round(intersectionArea / sketch_area * 100);
polygons.addFeature(intersection); intersections.addFeature(intersection);
intersection.setStyle(new ol.style.Style({
fill : new ol.style.Fill({
color : 'rgba(255, 155, 51, 0.5)'
})
}))
$('#dataPanel').append(feature.get('description') + " (" + citygml_percentage + "%"); $('#dataPanel').append(feature.get('description') + " (" + citygml_percentage + "%");
if (sketch_percentage == 100) { if (sketch_percentage == 100) {
$('#dataPanel').append(", all inside"); $('#dataPanel').append(", all inside");
...@@ -132,8 +152,8 @@ function findIntersections() { ...@@ -132,8 +152,8 @@ function findIntersections() {
$('#dataPanel').append("No intersection found with any CityGML<br/>\n"); $('#dataPanel').append("No intersection found with any CityGML<br/>\n");
} }
} }
function displayInfo() {
draw.on('drawend', function(e) { var start = new Date().getTime();
$('#dataPanel').empty(); $('#dataPanel').empty();
var geom = /** @type {ol.geom.Polygon} */ var geom = /** @type {ol.geom.Polygon} */
(sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326')); (sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326'));
...@@ -156,10 +176,30 @@ draw.on('drawend', function(e) { ...@@ -156,10 +176,30 @@ draw.on('drawend', function(e) {
$('#dataPanel').append("Area" + "<br/>\n"); $('#dataPanel').append("Area" + "<br/>\n");
$('#dataPanel').append((Math.round(area / 1000) / 10).toString() + " ha<br/><br/>\n"); $('#dataPanel').append((Math.round(area / 1000) / 10).toString() + " ha<br/><br/>\n");
findIntersections(); findIntersections();
var end = new Date().getTime();
var time = end - start;
console.log('Execution time: ' + time);
}
draw.on('drawend', function(e) {
displayInfo();
reset_btn.disabled = false;
send_btn.disabled = false;
}); });
map.addInteraction(draw);
$('#reset').click(function() { $('#reset').click(function() {
// TODO: Should also remove current drawing if polygon isn't finished
$('#dataPanel').empty(); $('#dataPanel').empty();
polygons.clear(); featureOverlay.getFeatures().clear();
intersections.clear();
reset_btn.disabled = true;
send_btn.disabled = true;
});
$('#send').click(function() {
var wktFormat = new ol.format.WKT();
fxapp.downloadRegion(wktFormat.writeFeature(sketch, {
dataProjection : ol.proj.get('EPSG:4326'),
featureProjection : ol.proj.get('EPSG:3857')
}));
}); });
website/style/ol.css
View file @ c548ba99
.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:#95b9e6;background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{position:absolute;background-color:#eee;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:#7b98bc;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:#4c6079;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100%-1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{position:absolute;top:4.5em;left:.5em;background:#eee;background:rgba(255,255,255,.4);width:24px;height:200px}.ol-zoomslider-thumb{position:absolute;background:#7b98bc;background:rgba(0,60,136,.5);border-radius:2px;cursor:pointer;height:10px;width:22px;margin:3px}.ol-touch .ol-zoomslider{top:5.5em;width:2.052em}.ol-touch .ol-zoomslider-thumb{width:1.8em}.ol-overviewmap{position:absolute;left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)} .ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:#95b9e6;background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{position:absolute;background-color:#eee;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:#7b98bc;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:#4c6079;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{position:absolute;top:4.5em;left:.5em;background:#eee;background:rgba(255,255,255,.4);width:24px;height:200px}.ol-zoomslider-thumb{position:absolute;background:#7b98bc;background:rgba(0,60,136,.5);border-radius:2px;cursor:pointer;height:10px;width:22px;margin:3px}.ol-touch .ol-zoomslider{top:5.5em;width:2.052em}.ol-touch .ol-zoomslider-thumb{width:1.8em}.ol-overviewmap{position:absolute;left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}
\ No newline at end of file \ No newline at end of file
Supports Markdown
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