Prospettiva 3D su mappe in Leaflet, CartoDB?

12

Esistono librerie JS là fuori che renderebbero normali le mappe piatte (come Leaflet) in una mappa prospettica come questa, sul web:

inserisci qui la descrizione dell'immagine

Inoltre, qualcuno ha visto qualcosa che potesse trasformare i dati CartoDB in una rappresentazione 3D, come questa?

javascript leaflet 3d carto

— knutole
fonte

1

Non sono sicuro dell'integrazione con cartodb, ma di recente ho visto questo post sulla creazione di mappe 3D da QGIS utilizzando la libreria three.js . Potresti dare un'occhiata a quello.

— RyanK Dalton,

2

Vedi anche: Three.js + leaflet = mappe 3D? su StackOverflow

— RyanKDalton

1

E un paio di articoli da esaminare: Rendering delle informazioni geografiche in 3D con Three.js e D3.js e Visualizzazione delle tracce GPS in 3D con three.js e d3.js

— RyanKDalton

1

Forse trovi utile questa visualizzazione: pluto.cartodb.com/viz/bf4dacd4-003c-11e3-aaf8-a9294e572fad/…

— javisantana

7

Forse potresti usare Osmbuildings . È una libreria JavaScript per visualizzare OpenStreetMaps (o GeoJSON personalizzato) costruendo la geometria in una prospettiva 3D.

OSMbuildingJS

Utilizza direttamente i dati OpenStreetMaps. Aggiungi il metodo loadData ():

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)

Oppure puoi caricare il tuo GeoJSON. Basta cambiare il metodo loadData () in setData (geojson):

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

I tuoi dati devono avere una proprietà altezza e puoi cambiare dinamicamente il colore del muro e del tetto:

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

E persino cambiare la prospettiva dell'ombra impostando il giorno:

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

— Sigon
fonte

La versione corrente di OSM Buildings (0.2.2b) non supporta il setDatametodo, ma setfunziona! Diventa così:var osmb = new OSMBuildings(map).setData(geoJSON);

— bradypus

4

Questo è uno dei principali casi d'uso per ViziCities (città 3D nel browser fornite da OpenStreetMap), sebbene i livelli di dati non funzionino ancora. Forse qualcosa da considerare per il futuro: https://github.com/robhawkes/vizicities

Disclaimer: sono lo sviluppatore di ViziCities

— Robin Hawkes
fonte

1

Bel progetto! Inoltre, mentre è abbastanza ovvio che questo è un progetto a cui sei affiliato, potresti voler renderlo un po 'più chiaro (anche se è open source).

— blah238,

Grazie, ma sto cercando una soluzione non WebGL.

— Knutole

1

Nessun problema, volevo solo darti un avvertimento.

— Robin Hawkes,

Questa versione ha i grafici o qualche versione migliorata?

— joker21

2

È possibile utilizzare OSM2world per passare i dati 2D da OpenStreetMap (map.osm) a oggetti 3D (map.obj), quindi utilizzare un altro convertitore ( convert_obj_three.py ) per convertirli in un modello JSON threejs (map.js), quindi utilizzare in una scena trejs.

Puoi vedere come qui:

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

— Sigon
fonte

Molte grazie. Ma questo richiede WebGL, giusto?

— Knutole,

1

Threejs è una libreria / api javascript che sfrutta WebGL. Ma nel codice devi solo includere due librerie: three.js e OrbitControls.js (questo serve per gestire l'orbita della telecamera).

— sigon

1

e sì, threejs funziona solo nei browser supportati da WebGL.

— sigon,

1

Il più vicino che ho visto è il lavoro di Mike Bostock .

Ha una mappa davvero interessante che ha una sorta di proiezione obliqua .

Ma non c'è nulla che lo renda facile. D3 fa la testa per quanto riguarda l'impostazione delle proiezioni. Puoi fare cose fantastiche se ci lavori.

— Alex Leith
fonte

OK, come fa Mike? Grazie per la punta

— knutole

In questo modo: bl.ocks.org/mbostock/3790444

— John Haugeland

1

http://osm2world.org/ funziona senza WebGL, ma utilizza Java invece di js.

Progettato per l'output di dati di edifici di Openstreetmap, dovrebbe essere adottabile anche per altri dati 3D.

L'output è una mappa scivolosa simile all'opuscolo: http://maps.osm2world.org/

— ANDREJ
fonte

1

Bene, con CartoDB puoi fare qualcosa del genere http://andrewxhill.com/cartodb-examples/scroll-story/pluto/index.html#4

Devi usare questo parametro CartoCSS: {building-height: 512; }

Maggiori informazioni qui: https://github.com/CartoDB/cartodb-pluto

— Óscar Martínez
fonte