//TODO: Add zoom to extent as control //TODO: Try to leave everything in 4326 //TODO: Add some tiles for offline mode var reset_btn = $('#reset')[0]; var dataPanel = $('#dataPanel'); 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/ var wgs84Sphere = new ol.Sphere(6378137); 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 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) { 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; }); } // 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); 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; draw.on('drawstart', function(evt) { fromJavaFX = (typeof fxapp !== 'undefined'); 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 :
\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 = "" + feature["description"] + ""; // console.log(description); } else { description = feature['description']; } dataPanel.append(description + " (" + citygml_percentage + "%"); if (sketch_percentage == 100) { dataPanel.append(", all inside"); } dataPanel.append(")
\n"); } } 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
\n"); } } function downloadRegionFromCityGML(i) { // TODO: Disable all links // TODO: DRY $("html").addClass("wait"); var feature = kml_source.getFeatures()[i]; // Waiting 100ms in order to let the cursor change setTimeout(function() { // var start = new Date().getTime(); fxapp.downloadRegionFromCityGML(sketchAsWKT(), feature.get("project"), feature.get("name")); // var end = new Date().getTime(); // var time = end - start; // console.log('DL Execution time: ' + time); setTimeout(function() { $("html").removeClass("wait"); dataPanel.append("Done
\n"); }, 100); }, 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 gsk3_coords = ""; 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] + "));
"; wgs84_coords += "(" + wgs84_coord[1] + "," + wgs84_coord[0] + ")
"; 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] + ")
"; } dataPanel.append("WGS84 Coordinates
"); dataPanel.append(wgs84_coords + "
\n"); dataPanel.append("GSK3 Coordinates
"); dataPanel.append(gsk3_coords + "
\n"); } dataPanel.append("Area" + "
\n"); dataPanel.append((Math.round(area / 1000) / 10).toString() + " ha

\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(); $("html").removeClass("wait"); draw.setActive(true); featureOverlay.getFeatures().clear(); intersections.clear(); reset_btn.disabled = true; focusOnMap(); } }); novafactory_layer.downloadFinished = function() { // FIXME: Weird
s are inserted between lines dataPanel.append("NovaFactory : DONE
\n"); this.disabled = false; // FIXME: Doesn't stop waiting cursor $("html").removeClass("wait"); }; novafactory_layer.updateStatus = function(status) { dataPanel.append("NovaFactory : " + status + "
\n"); }; novafactory_layer.selectSaveFile = function(zipFilename) { fxapp.doSomethingWithThisZIP(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('4326'), feature.get('name'), novafactory_layer); setTimeout(function() { $("html").removeClass("wait"); dataPanel.append("Done
\n"); }, 100); }, 100); } function sketchAsWKT(epsgId) { epsgId = (typeof epsgId === 'undefined') ? '31467' : epsgId; var wktFormat = new ol.format.WKT(); return wktFormat.writeFeature(sketch, { dataProjection : ol.proj.get('EPSG:' + epsgId), featureProjection : ol.proj.get('EPSG:3857') }); } function focusOnMap() { $('#map').focus(); // $('#map').scrollIntoView(); } focusOnMap();