openstreetmap gebäudevisualisierung mit javascript · osm buildings •ergänzung zu web-karten...
Post on 27-Sep-2019
11 Views
Preview:
TRANSCRIPT
OSM Buildings.org • Jan Marsch
OpenStreetMap Gebäudevisualisierung
mit JavaScript
OSM Buildings
• Ergänzung zu Web-Karten
• dynamische Gebäudedarstellung
• lauffähig auf gängigen Mobilgeräten
• schnell, klein, einfach
Darstellungsformen
normales Layout
Freihandzeichnung
3d stereoskopisch
Integration
• weitere Ebene auf vorhandener Kartendarstellung
• Systeme: LeafletJS, OpenLayers, ArcGIS
• Geolokalisierung, Suche, Routing etc. problemlos
<head> <script src="OSMBuildings-Leaflet.js"></script> </head> <script> var map = new L.Map({...}); new OSMBuildings(map).loadData(); </script>
Frontend
• HTML5, JavaScript, Canvas - kein WebGL, Java, Flash
• vereinfachte Matrixoperationen für räumlichen Effekt
• 3D Modelle: Grundrißpolygon + Höhe
• weniger Daten
• schnellere Berechnung
• schnellere Darstellung
• Beispiel Zylinder: Anzahl der Flächen in OSM Buildings?
Optimierung
Datenquellen
• OpenStreetMap: 105 Mio Gebäude, 1,7 Mio mit Höhe
Client
CartoDB OSM / Overpass
Building Repository
• Server side caching, Storage
• Enable client side caching
• Cross domain handling
• Format conversion, Projection
• Slice data into tiles
• Filtering, Selection
Files / Services
GeoJSON Tiles OSM JSON Tiles
GeoJSON Tiles
OSM JSON GeoJSON
KML
GML
Shape
Gegenüberstellung
• kein Anspruch auf Fotorealismus
• „Karte“ wird nicht neu erfunden
• Besonderheiten: Schattenwürfe, Stereo-3D, Mobilgeräte
• ähnlich: OSM2World, ViziCities, Google Maps
• gemeinsame Standards
Ausblick
• weitere Kartensysteme und Datenquellen
• Einfache Dachformen
• Grafische Effekte
• Kooperation mit WebGL Projekten
• Experimentell: Indoor Mapping
Links
• OSM Buildings osmbuildings.org
• LeafletJS leafletjs.com
• OSM Overpass overpass-api.de
• GeoJSON geojson.org
• CartoDB cartodb.com
• OSM2World maps.osm2world.org
• ViziCities vizicities.com
top related