10
OSM Buildings.org • Jan Marsch OpenStreetMap Gebäudevisualisierung mit JavaScript

OpenStreetMap Gebäudevisualisierung mit JavaScript · OSM Buildings •Ergänzung zu Web-Karten •dynamische Gebäudedarstellung •lauffähig auf gängigen Mobilgeräten •schnell,

  • Upload
    others

  • View
    11

  • Download
    0

Embed Size (px)

Citation preview

Page 1: OpenStreetMap Gebäudevisualisierung mit JavaScript · OSM Buildings •Ergänzung zu Web-Karten •dynamische Gebäudedarstellung •lauffähig auf gängigen Mobilgeräten •schnell,

OSM Buildings.org • Jan Marsch

OpenStreetMap Gebäudevisualisierung

mit JavaScript

Page 2: OpenStreetMap Gebäudevisualisierung mit JavaScript · OSM Buildings •Ergänzung zu Web-Karten •dynamische Gebäudedarstellung •lauffähig auf gängigen Mobilgeräten •schnell,

OSM Buildings

• Ergänzung zu Web-Karten

• dynamische Gebäudedarstellung

• lauffähig auf gängigen Mobilgeräten

• schnell, klein, einfach

Page 3: OpenStreetMap Gebäudevisualisierung mit JavaScript · OSM Buildings •Ergänzung zu Web-Karten •dynamische Gebäudedarstellung •lauffähig auf gängigen Mobilgeräten •schnell,

Darstellungsformen

normales Layout

Freihandzeichnung

3d stereoskopisch

Page 4: OpenStreetMap Gebäudevisualisierung mit JavaScript · OSM Buildings •Ergänzung zu Web-Karten •dynamische Gebäudedarstellung •lauffähig auf gängigen Mobilgeräten •schnell,

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>

Page 5: OpenStreetMap Gebäudevisualisierung mit JavaScript · OSM Buildings •Ergänzung zu Web-Karten •dynamische Gebäudedarstellung •lauffähig auf gängigen Mobilgeräten •schnell,

Frontend

• HTML5, JavaScript, Canvas - kein WebGL, Java, Flash

• vereinfachte Matrixoperationen für räumlichen Effekt

• 3D Modelle: Grundrißpolygon + Höhe

Page 6: OpenStreetMap Gebäudevisualisierung mit JavaScript · OSM Buildings •Ergänzung zu Web-Karten •dynamische Gebäudedarstellung •lauffähig auf gängigen Mobilgeräten •schnell,

• weniger Daten

• schnellere Berechnung

• schnellere Darstellung

• Beispiel Zylinder: Anzahl der Flächen in OSM Buildings?

Optimierung

Page 7: OpenStreetMap Gebäudevisualisierung mit JavaScript · OSM Buildings •Ergänzung zu Web-Karten •dynamische Gebäudedarstellung •lauffähig auf gängigen Mobilgeräten •schnell,

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

Page 8: OpenStreetMap Gebäudevisualisierung mit JavaScript · OSM Buildings •Ergänzung zu Web-Karten •dynamische Gebäudedarstellung •lauffähig auf gängigen Mobilgeräten •schnell,

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

Page 9: OpenStreetMap Gebäudevisualisierung mit JavaScript · OSM Buildings •Ergänzung zu Web-Karten •dynamische Gebäudedarstellung •lauffähig auf gängigen Mobilgeräten •schnell,

Ausblick

• weitere Kartensysteme und Datenquellen

• Einfache Dachformen

• Grafische Effekte

• Kooperation mit WebGL Projekten

• Experimentell: Indoor Mapping

Page 10: OpenStreetMap Gebäudevisualisierung mit JavaScript · OSM Buildings •Ergänzung zu Web-Karten •dynamische Gebäudedarstellung •lauffähig auf gängigen Mobilgeräten •schnell,

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