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

Fixing errors found by jshint

parent 2ffc83c1
Hide whitespace changes
Inline Side-by-side
website/script/simstadt_openlayers.js
View file @ 526c3971
//TODO: Add zoom to extent as control //TODO: Add zoom to extent as control
//TODO: Try to leave everything in 4326 //TODO: Try to leave everything in 4326
//TODO: Add some tiles for offline mode
var reset_btn = $('#reset')[0];
var dataPanel = $('#dataPanel'); var reset_btn = $('#reset')[0];
var br = document.createElement('br'); var dataPanel = $('#dataPanel');
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/
var wgs84Sphere = new ol.Sphere(6378137); var wgs84Sphere = new ol.Sphere(6378137);
var osm_layer = new ol.layer.Tile({ var osm_layer = new ol.layer.Tile({
source : new ol.source.OSM() source : new ol.source.OSM()
}); });
var kml_source = new ol.source.KML({ var kml_source = new ol.source.KML({
projection : ol.proj.get('EPSG:3857'), projection : ol.proj.get('EPSG:3857'),
url : 'data/citygml_hulls.kml', url : 'data/citygml_hulls.kml',
extractAttributes : false, extractAttributes : false,
extractStyles : false extractStyles : false
}) });
function polygon_style(color, alpha) { function polygon_style(color, alpha) {
return new ol.style.Style({ return new ol.style.Style({
fill : new ol.style.Fill({ fill : new ol.style.Fill({
color : 'rgba(255, 255, 255,' + alpha + ')' color : 'rgba(255, 255, 255,' + alpha + ')'
}), }),
stroke : new ol.style.Stroke({ stroke : new ol.style.Stroke({
color : color, color : color,
width : 2, width : 2,
lineDash : [ 5, 10 ] lineDash : [ 5, 10 ]
}), }),
}) });
} }
var kml_layer = new ol.layer.Vector({ var kml_layer = new ol.layer.Vector({
source : kml_source, source : kml_source,
style : polygon_style('#777777', 0.2) style : polygon_style('#777777', 0.2)
}); });
var intersections = new ol.source.Vector(); var intersections = new ol.source.Vector();
var intersections_layer = new ol.layer.Vector({ var intersections_layer = new ol.layer.Vector({
source : intersections, source : intersections,
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.2)' color : 'rgba(255, 155, 51, 0.2)'
}) })
}) })
}); });
var novafactory_vectors = new ol.source.Vector({ var novafactory_vectors = new ol.source.Vector({
features : [] features : []
}); });
novafactory_vectors.addNovaFactoryProduct = function(xmin, ymin, xmax, ymax, name, epsgId) { novafactory_vectors.addNovaFactoryProduct = function(xmin, ymin, xmax, ymax, name, epsgId) {
var box = new ol.geom.Polygon( var box = new ol.geom.Polygon(
[ [ [ xmin, ymin ], [ xmin, ymax ], [ xmax, ymax ], [ xmax, ymin ], [ xmin, ymin ] ] ]); [ [ [ xmin, ymin ], [ xmin, ymax ], [ xmax, ymax ], [ xmax, ymin ], [ xmin, ymin ] ] ]);
box.transform('EPSG:' + epsgId, 'EPSG:3857'); box.transform('EPSG:' + epsgId, 'EPSG:3857');
var feature = new ol.Feature({ var feature = new ol.Feature({
geometry : box, geometry : box,
name : name, name : name,
}); });
feature["geoJSON"] = geoJSONformat.writeFeatureObject(feature); feature["geoJSON"] = geoJSONformat.writeFeatureObject(feature);
feature["area"] = feature.getGeometry().getArea(); feature["area"] = feature.getGeometry().getArea();
feature["description"] = "novaFACTORY>" + name; feature["description"] = "novaFACTORY>" + name;
feature["available"] = true; feature["available"] = true;
feature["source"] = "NovaFACTORY"; feature["source"] = "NovaFACTORY";
this.addFeature(feature); this.addFeature(feature);
} };
var novafactory_layer = new ol.layer.Vector({ var novafactory_layer = new ol.layer.Vector({
source : novafactory_vectors, source : novafactory_vectors,
style : polygon_style('#ff7700', 0.1) style : polygon_style('#ff7700', 0.1)
}); });
var map = new ol.Map({ var map = new ol.Map({
target : 'map', target : 'map',
layers : [ osm_layer, kml_layer, novafactory_layer, intersections_layer ], layers : [ osm_layer, kml_layer, novafactory_layer, intersections_layer ],
interactions : ol.interaction.defaults({ interactions : ol.interaction.defaults({
keyboard : true keyboard : true
}) })
}); });
var geoJSONformat = new ol.format.GeoJSON(); var geoJSONformat = new ol.format.GeoJSON();
kml_layer.addEventListener("change", function(event) { kml_layer.addEventListener("change", function() {
map.getView().fitExtent(kml_source.getExtent(), (map.getSize())); map.getView().fitExtent(kml_source.getExtent(), (map.getSize()));
}); });
function updateGMLPolygons() { function updateGMLPolygons() {
kml_source.forEachFeature(function(feature) { kml_source.forEachFeature(function(feature) {
feature["geoJSON"] = geoJSONformat.writeFeatureObject(feature); feature["geoJSON"] = geoJSONformat.writeFeatureObject(feature);
feature["area"] = feature.getGeometry().getArea(); feature["area"] = feature.getGeometry().getArea();
var project = feature.get("project"); var project = feature.get("project");
var name = feature.get("name"); var name = feature.get("name");
feature["description"] = project + ">" + name; feature["description"] = project + ">" + name;
feature["source"] = "CityGML"; feature["source"] = "CityGML";
var citygmlHere; var citygmlHere;
if (fromJavaFX) { if (fromJavaFX) {
citygmlHere = fxapp.checkIfCityGMLSAreAvailable(project, name); citygmlHere = fxapp.checkIfCityGMLSAreAvailable(project, name);
} }
feature["available"] = citygmlHere; feature["available"] = citygmlHere;
}); });
} }
// The features are not added to a regular vector layer/source, // The features are not added to a regular vector layer/source,
// but to a feature overlay which holds a collection of features. // but to a feature overlay which holds a collection of features.
// This collection is passed to the modify and also the draw // This collection is passed to the modify and also the draw
// interaction, so that both can add or modify features. // interaction, so that both can add or modify features.
var featureOverlay = new ol.FeatureOverlay({ 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)'
}), }),
stroke : new ol.style.Stroke({ stroke : new ol.style.Stroke({
color : '#ffcc33', color : '#ffcc33',
width : 4 width : 4
}), }),
image : new ol.style.Circle({ image : new ol.style.Circle({
radius : 5, radius : 5,
fill : new ol.style.Fill({ fill : new ol.style.Fill({
color : '#ffcc33' color : '#ffcc33'
}) })
}) })
}) })
}); });
featureOverlay.setMap(map); featureOverlay.setMap(map);
var selected_features = featureOverlay.getFeatures(); var selected_features = featureOverlay.getFeatures();
selected_features.on('add', function(event) { selected_features.on('add', function(event) {
var feature = event.element; var feature = event.element;
feature.on("change", function(event) { feature.on("change", function() {
displayInfo(); displayInfo();
}); });
}); });
var modify = new ol.interaction.Modify({ var modify = new ol.interaction.Modify({
features : featureOverlay.getFeatures(), features : featureOverlay.getFeatures(),
// the SHIFT key must be pressed to delete vertices, so // the SHIFT key must be pressed to delete vertices, so
// that new vertices can be drawn at the same position // that new vertices can be drawn at the same position
// of existing vertices // of existing vertices
deleteCondition : function(event) { deleteCondition : function(event) {
return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event); return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
} }
}); });
map.addInteraction(modify); map.addInteraction(modify);
draw = new ol.interaction.Draw({ var draw = new ol.interaction.Draw({
features : featureOverlay.getFeatures(), features : featureOverlay.getFeatures(),
type : 'Polygon' type : 'Polygon'
}); });
map.addInteraction(draw); map.addInteraction(draw);
var sketch; var sketch;
var fromJavaFX; var fromJavaFX;
draw.on('drawstart', function(evt) { draw.on('drawstart', function(evt) {
fromJavaFX = (typeof fxapp !== 'undefined'); fromJavaFX = (typeof fxapp !== 'undefined');
sketch = evt.feature; sketch = evt.feature;
reset_btn.disabled = false; reset_btn.disabled = false;
updateGMLPolygons(); updateGMLPolygons();
}); });
var sourceProj = map.getView().getProjection(); var sourceProj = map.getView().getProjection();
function findIntersections() { function findIntersections() {
var sketch_area = sketch.getGeometry().getArea(); var sketch_area = sketch.getGeometry().getArea();
var poly1 = geoJSONformat.writeFeatureObject(sketch); var poly1 = geoJSONformat.writeFeatureObject(sketch);
var intersection_found = false; var intersection_found = false;
intersections.clear(); intersections.clear();
function findIntersection(feature) { function findIntersection(feature) {
try { try {
var jsonIntersection = turf.intersect(poly1, feature["geoJSON"]); var jsonIntersection = turf.intersect(poly1, feature["geoJSON"]);
if (undefined != jsonIntersection) { if (undefined !== jsonIntersection) {
if (!intersection_found) { if (!intersection_found) {
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);
var intersectionArea = intersection.getGeometry().getArea(); var intersectionArea = intersection.getGeometry().getArea();
var citygml_percentage = Math.round(intersectionArea / feature["area"] * 100); var citygml_percentage = Math.round(intersectionArea / feature["area"] * 100);
var sketch_percentage = Math.round(intersectionArea / sketch_area * 100); var sketch_percentage = Math.round(intersectionArea / sketch_area * 100);
intersections.addFeature(intersection); intersections.addFeature(intersection);
var description; var description;
if (feature["available"]) { if (feature["available"]) {
description = "<a href=\"#\" onclick=\"downloadRegionFrom" + feature["source"] + "(" + i description = "<a href=\"#\" onclick=\"downloadRegionFrom" + feature["source"] + "(" + i
+ ");return false;\">" + feature["description"] + "</a>"; + ");return false;\">" + feature["description"] + "</a>";
console.log(description); // console.log(description);
} else { } else {
description = feature['description']; description = feature['description'];
} }
dataPanel.append(description + " (" + citygml_percentage + "%"); dataPanel.append(description + " (" + citygml_percentage + "%");
if (sketch_percentage == 100) { if (sketch_percentage == 100) {
dataPanel.append(", all inside"); dataPanel.append(", all inside");
} }
dataPanel.append(")<br/>\n"); dataPanel.append(")<br/>\n");
} }
} catch (err) { } catch (err) {
console.log(feature.get('description') + " - " + err); console.log(feature.get('description') + " - " + err);
} }
i++; i++;
} }
var i = 0; var i = 0;
novafactory_vectors.forEachFeature(findIntersection) novafactory_vectors.forEachFeature(findIntersection);
var i = 0; i = 0;
kml_source.forEachFeature(findIntersection) kml_source.forEachFeature(findIntersection);
if (!intersection_found) { if (!intersection_found) {
dataPanel.append("No intersection found with any CityGML or NovaFactory product<br/>\n"); dataPanel.append("No intersection found with any CityGML or NovaFactory product<br/>\n");
} }
} }
function downloadRegionFromCityGML(i) { function downloadRegionFromCityGML(i) {
// TODO: Disable all links // TODO: Disable all links
// TODO: DRY // TODO: DRY
$("html").addClass("wait"); $("html").addClass("wait");
var feature = kml_source.getFeatures()[i]; var feature = kml_source.getFeatures()[i];
// Waiting 100ms in order to let the cursor change // Waiting 100ms in order to let the cursor change
setTimeout(function() { setTimeout(function() {
// var start = new Date().getTime(); // var start = new Date().getTime();
fxapp.downloadRegionFromCityGML(sketchAsWKT(), feature.get("project"), feature.get("name")); fxapp.downloadRegionFromCityGML(sketchAsWKT(), feature.get("project"), feature.get("name"));
// var end = new Date().getTime(); // var end = new Date().getTime();
// var time = end - start; // var time = end - start;
// console.log('DL Execution time: ' + time); // console.log('DL Execution time: ' + time);
setTimeout(function() { setTimeout(function() {
$("html").removeClass("wait"); $("html").removeClass("wait");
dataPanel.append("Done<br/>\n"); dataPanel.append("Done<br/>\n");
}, 100); }, 100);
}, 100); }, 100);
} }
function displayInfo() { function displayInfo() {
// var start = new Date().getTime(); // 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'));
var coordinates = geom.getLinearRing(0).getCoordinates(); var coordinates = geom.getLinearRing(0).getCoordinates();
var area = Math.abs(wgs84Sphere.geodesicArea(coordinates)); var area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
var coords = geom.getLinearRing(0).getCoordinates(); var coords = geom.getLinearRing(0).getCoordinates();
if (!fromJavaFX) { if (!fromJavaFX) {
var gsk3_coords = ""; var gsk3_coords = "";
var wgs84_coords = ""; var wgs84_coords = "";
var n = coords.length; var n = coords.length;
for (var i = 0; i < n; i++) { for (var i = 0; i < n; i++) {
var wgs84_coord = coords[i]; var wgs84_coord = coords[i];
// wgs84_coords += "regionPolygon.add(new Coord(" + wgs84_coord[1] + // wgs84_coords += "regionPolygon.add(new Coord(" + wgs84_coord[1] +
// "," + wgs84_coord[0] + "));<br/>"; // "," + wgs84_coord[0] + "));<br/>";
wgs84_coords += "(" + wgs84_coord[1] + "," + wgs84_coord[0] + ")<br/>"; wgs84_coords += "(" + wgs84_coord[1] + "," + wgs84_coord[0] + ")<br/>";
var gsk3_coord = ol.proj.transform(coords[i], ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:31467')) var gsk3_coord = ol.proj.transform(coords[i], ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:31467'));
gsk3_coords += "(" + gsk3_coord[0] + "," + gsk3_coord[1] + ")<br/>"; gsk3_coords += "(" + gsk3_coord[0] + "," + gsk3_coord[1] + ")<br/>";
} }
dataPanel.append("WGS84 Coordinates<br/>"); dataPanel.append("WGS84 Coordinates<br/>");
dataPanel.append(wgs84_coords + "<br/>\n"); dataPanel.append(wgs84_coords + "<br/>\n");
dataPanel.append("GSK3 Coordinates<br/>"); dataPanel.append("GSK3 Coordinates<br/>");
dataPanel.append(gsk3_coords + "<br/>\n"); dataPanel.append(gsk3_coords + "<br/>\n");
} }
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 end = new Date().getTime();
// var time = end - start; // var time = end - start;
// console.log('Execution time: ' + time); // console.log('Execution time: ' + time);
} }
draw.on('drawend', function(e) { draw.on('drawend', function() {
displayInfo(); displayInfo();
draw.setActive(false); draw.setActive(false);
}); });
$('#reset').click(function() { $('#reset').click(function() {
try { try {
draw.finishDrawing(); draw.finishDrawing();
} finally { } finally {
dataPanel.empty(); dataPanel.empty();
$("html").removeClass("wait"); $("html").removeClass("wait");
draw.setActive(true); draw.setActive(true);
featureOverlay.getFeatures().clear(); featureOverlay.getFeatures().clear();
intersections.clear(); intersections.clear();
reset_btn.disabled = true; reset_btn.disabled = true;
focusOnMap(); focusOnMap();
} }
}); });
novafactory_layer.downloadFinished = function() { novafactory_layer.downloadFinished = function() {
// FIXME: Weird <br>s are inserted between lines // FIXME: Weird <br>s are inserted between lines
dataPanel.append("NovaFactory : DONE <br/>\n"); dataPanel.append("NovaFactory : DONE <br/>\n");
this.disabled = false; this.disabled = false;
// FIXME: Doesn't stop waiting cursor // FIXME: Doesn't stop waiting cursor
$("html").removeClass("wait"); $("html").removeClass("wait");
} };
novafactory_layer.updateStatus = function(status) { novafactory_layer.updateStatus = function(status) {
dataPanel.append("NovaFactory : " + status + "<br/>\n"); dataPanel.append("NovaFactory : " + status + "<br/>\n");
} };
novafactory_layer.selectSaveFile = function(zipFilename) { novafactory_layer.selectSaveFile = function(zipFilename) {
fxapp.doSomethingWithThisZIP(zipFilename); fxapp.doSomethingWithThisZIP(zipFilename);
} };
function downloadRegionFromNovaFACTORY(i) { function downloadRegionFromNovaFACTORY(i) {
$("html").addClass("wait"); $("html").addClass("wait");
var feature = novafactory_vectors.getFeatures()[i]; var feature = novafactory_vectors.getFeatures()[i];
// Waiting 100ms in order to let the cursor change // Waiting 100ms in order to let the cursor change
setTimeout(function() { setTimeout(function() {
fxapp.downloadRegion(sketchAsWKT('4326'), feature.get('name'), novafactory_layer); fxapp.downloadRegion(sketchAsWKT('4326'), feature.get('name'), novafactory_layer);
setTimeout(function() { setTimeout(function() {
$("html").removeClass("wait"); $("html").removeClass("wait");
dataPanel.append("Done<br/>\n"); dataPanel.append("Done<br/>\n");
}, 100); }, 100);
}, 100); }, 100);
} }
function sketchAsWKT(epsgId) { function sketchAsWKT(epsgId) {
var epsgId = (typeof epsgId === 'undefined') ? '31467' : epsgId; epsgId = (typeof epsgId === 'undefined') ? '31467' : epsgId;
var wktFormat = new ol.format.WKT(); var wktFormat = new ol.format.WKT();
return wktFormat.writeFeature(sketch, { return wktFormat.writeFeature(sketch, {
dataProjection : ol.proj.get('EPSG:' + epsgId), dataProjection : ol.proj.get('EPSG:' + epsgId),
featureProjection : ol.proj.get('EPSG:3857') featureProjection : ol.proj.get('EPSG:3857')
}) });
} }
function focusOnMap() { function focusOnMap() {
$('#map').focus(); $('#map').focus();
// $('#map').scrollIntoView(); // $('#map').scrollIntoView();
} }
focusOnMap(); focusOnMap();
\ 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