Perspectiva 3D en los mapas

Question

¿Existe alguna biblioteca JS que pueda convertir mapas planos normales (como Leaflet) en un mapa en perspectiva como éste, en la web?

Además, ¿alguien ha visto algo que pueda convertir los datos de CartoDB en una representación 3D, como ésta?

Answer 1

Tal vez podría utilizar Osmbuildings . Es una biblioteca JavaScript para visualizar OpenStreetMaps (o GeoJSON personalizado) construyendo geometría en una perspectiva 3D.

Utiliza directamente los datos de OpenStreetMaps. Sólo tiene que añadir el método 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)

También puedes cargar tu propio GeoJSON. Solo tienes que cambiar el método loadData() por setData(geojson):

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

Sus datos deben tener una propiedad de altura, y puede cambiar el color de la pared y el techo de forma dinámica:

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

E incluso cambiar la perspectiva de la sombra estableciendo el día:

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

Answer 2

Este es uno de los principales usos de ViziCities (ciudades 3D en el navegador basadas en OpenStreetMap), aunque las capas de datos aún no funcionan. Quizá sea algo a tener en cuenta en el futuro: https://github.com/robhawkes/vizicities

Descargo de responsabilidad: Soy el desarrollador de ViziCities

Answer 3

http://osm2world.org/ funciona sin WebGL, pero utiliza Java en lugar de js.

Diseñado para la salida de datos de edificios Openstreetmap, debería poder adoptarse también para otros datos 3D.

El resultado es un mapa deslizante similar a leaflet: http://maps.osm2world.org/

Answer 4

Pues bien, con CartoDB puedes hacer algo así http://andrewxhill.com/cartodb-examples/scroll-story/pluto/index.html#4

Debe utilizar este parámetro CartoCSS: { altura del edificio: 512; }

Más información aquí: https://github.com/CartoDB/cartodb-pluto

Answer 5

Lo más parecido que he visto es el trabajo de Mike Bostock .

Tiene un mapa muy chulo que tiene una especie de proyección oblicua .

Pero no hay nada que lo haga fácil. D3 me rompe la cabeza con respecto a la configuración de las proyecciones. Sin embargo, se pueden hacer cosas increíbles si se trabaja en ello.