3D-Perspektive auf Karten in Leaflet, CartoDB?

12

Gibt es eine JS-Bibliothek, die normale, flache Karten (wie Leaflet) in eine perspektivische Karte wie diese im Web umwandelt:

Bildbeschreibung hier eingeben

Hat jemand etwas gesehen, das CartoDB-Daten in 3D-Darstellungen verwandeln könnte?

javascript leaflet 3d carto

— Knutole
quelle

1

Ich bin mir nicht sicher, ob eine Integration mit cartodb möglich ist, aber ich habe kürzlich diesen Beitrag über das Erstellen von 3D-Karten aus QGIS mithilfe der three.js- Bibliothek gelesen . Vielleicht möchten Sie sich das mal ansehen.

— RyanKDalton

2

Siehe auch: Three.js + Faltblatt = 3D-Karten? auf StackOverflow

— RyanKDalton

1

Und ein paar Artikel zu sehen in: Render Geographic Information in 3D Mit Three.js und D3.js und Anzeigen GPS - Tracks in 3D mit three.js und d3.js

— RyanKDalton

1

Vielleicht finden Sie diese Visualisierung nützlich: pluto.cartodb.com/viz/bf4dacd4-003c-11e3-aaf8-a9294e572fad/…

— javisantana

7

Vielleicht könnten Sie Osmbuildings verwenden . Es ist eine JavaScript-Bibliothek zur Visualisierung von OpenStreetMaps (oder benutzerdefinierten GeoJSON) -Gebäudegeometrien in einer 3D-Perspektive.

OSMbuildingJS

Es verwendet OpenStreetMaps-Daten direkt. Fügen Sie einfach die loadData () -Methode hinzu:

var map = new L.Map('map').setView([52.50440, 13.33522], 17);
var osmb = new OSMBuildings(map).loadData();
L.control.layers({}, { Buildings:osmb }).addTo(map); // add to layer switcher (optional)

Oder Sie können Ihren eigenen GeoJSON laden. Ändern Sie einfach die loadData () -Methode in setData (geojson):

var osmb = new OSMBuildings(map).setData(geoJSON);

Ihre Daten müssen eine height-Eigenschaft haben, und Sie können die Wand- und Dachfarbe dynamisch ändern:

osmb.setStyle({ 
     wallColor:'rgba(100, 100, 250, 0.701961)', 
     roofColor:'rgb(220, 220, 50)', 
     shadows:true 
});

Und ändern Sie sogar die Schattenperspektive, indem Sie die Tageszeit einstellen:

osmb.setDate(new Date(2014, 3, 24, 13, 0));

— sigon
quelle

Die aktuelle Version von OSM Buildings (0.2.2b) unterstützt keine setDataMethode, setfunktioniert aber ! Es wird:var osmb = new OSMBuildings(map).setData(geoJSON);

— Bradypus

4

Dies ist einer der wichtigsten Anwendungsfälle für ViziCities (3D-Städte im Browser, der von OpenStreetMap unterstützt wird), obwohl die Datenebenen derzeit noch nicht funktionieren. Vielleicht sollten Sie etwas für die Zukunft beachten: https://github.com/robhawkes/vizicities

Haftungsausschluss: Ich bin der Entwickler von ViziCities

— Robin Hawkes
quelle

1

Cooles Projekt! Auch wenn es ziemlich offensichtlich ist, dass es sich um ein Projekt handelt, mit dem Sie verbunden sind, möchten Sie dies vielleicht ein wenig klarer machen (auch wenn es Open Source ist).

— blah238

Danke, aber ich suche eine Nicht-WebGL-Lösung.

— Knutole

1

Keine Sorge, wollte dir nur ein Heads-up geben.

— Robin Hawkes

Hat diese Version die Handlungen oder eine verbesserte Version?

— Joker21

2

Mit OSM2world können Sie 2D-Daten von OpenStreetMap (map.osm) an 3D-Objekte (map.obj) übergeben und anschließend mit einem anderen Konverter ( convert_obj_three.py ) in ein ThreeJS-JSON-Modell (map.js) konvertieren es in einer ThreeJs-Szene.

Sie können sehen wie hier:

https://www.youtube.com/watch?v=S6LbKH6NnZU

— sigon
quelle

Danke vielmals. Aber das erfordert WebGL, oder?

— Knutole

1

Threejs ist eine Javascript-Bibliothek / API, die WebGL nutzt. Der Code muss jedoch nur zwei Bibliotheken enthalten: three.js und OrbitControls.js (dies dient zum Verwalten der Kameraumlaufbahn).

— Sigon

1

und ja, threejs funktioniert nur in Browsern, die von WebGL unterstützt werden.

— Sigon

1

Das nächste, was ich gesehen habe, ist die Arbeit von Mike Bostock .

Er hat eine wirklich coole Karte, die eine Art schräge Projektion hat .

Aber nichts macht es einfach. D3 tut mein Bestes, um Projektionen aufzustellen. Sie können erstaunliche Dinge machen, wenn Sie daran arbeiten.

— Alex Leith
quelle

OK, wie macht Mike das? Danke für den Tipp

— knutole

Wie folgt

— John Haugeland

1

http://osm2world.org/ funktioniert ohne WebGL, verwendet jedoch Java anstelle von js.

Entwickelt für die Ausgabe von Openstreetmap-Gebäudedaten, sollte es auch für andere 3D-Daten verwendbar sein.

Die Ausgabe ist eine rutschige Karte, ähnlich der Broschüre: http://maps.osm2world.org/

— AndreJ
quelle

1

Nun, mit CartoDB können Sie so etwas tun: http://andrewxhill.com/cartodb-examples/scroll-story/pluto/index.html#4

Sie müssen diesen CartoCSS-Parameter verwenden: {Gebäudehöhe: 512; }

Weitere Informationen finden Sie hier: https://github.com/CartoDB/cartodb-pluto

— Óscar Martínez
quelle