Perspectiva 3D en mapas en Leaflet, CartoDB?

12

¿Existe alguna biblioteca JS que pueda representar mapas normales y planos (como Leaflet) en un mapa en perspectiva como este, en la web:

ingrese la descripción de la imagen aquí

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

javascript leaflet 3d carto Knutole
fuente
1
No estoy seguro acerca de la integración con cartodb, pero recientemente vi esta publicación sobre cómo hacer mapas 3D de QGIS usando la biblioteca three.js . Es posible que desee echar un vistazo a eso.
RyanKDalton
2
Ver también: Three.js + leaflet = mapas en 3D? en StackOverflow
RyanKDalton
1
Y un par de artículos para analizar: Renderizar información geográfica en 3D con Three.js y D3.js , y Mostrar pistas GPS en 3D con three.js y d3.js
RyanKDalton
1
Tal vez encuentre útil esta visualización: pluto.cartodb.com/viz/bf4dacd4-003c-11e3-aaf8-a9294e572fad/…
javisantana

Respuestas:

7

Quizás podrías usar Osmbuildings . Es una biblioteca de JavaScript para visualizar la geometría de construcción OpenStreetMaps (o GeoJSON personalizada) en una perspectiva 3D.

OSMbuildingJS

Utiliza los datos de OpenStreetMaps directamente. Simplemente agregue 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)

O bien, puede cargar su propio GeoJSON. Simplemente cambie el método loadData () a 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 cambie la perspectiva de la sombra configurando el día:

osmb.setDate(new Date(2014, 3, 24, 13, 0));
sigon
fuente
La versión actual de OSM Buildings (0.2.2b) no admite el setDatamétodo, ¡pero setfunciona! Se ajusta se convierte en:var osmb = new OSMBuildings(map).setData(geoJSON);
bradypus
4

Este es uno de los casos de uso principales para ViziCities (ciudades 3D en el navegador con tecnología de OpenStreetMap), aunque las capas de datos todavía no funcionan. Quizás algo a tener en cuenta para el futuro: https://github.com/robhawkes/vizicities

Descargo de responsabilidad: soy el desarrollador de ViziCities

Robin Hawkes
fuente
1
Proyecto genial! Además, si bien es bastante obvio que este es un proyecto al que está afiliado, es posible que desee dejarlo un poco más claro (incluso si es de código abierto).
blah238
Gracias, pero estoy buscando una solución que no sea WebGL.
knutole
1
No te preocupes, solo quería avisarte.
Robin Hawkes
¿Esta versión tiene las tramas o alguna versión mejorada?
joker21
2

Puede usar OSM2world para pasar datos 2D desde OpenStreetMap (map.osm) a objetos 3D (map.obj), luego usar otro convertidor ( convert_obj_three.py ) para convertirlo en un modelo JSON de tres js (map.js), y luego usar en una escena de tres js.

Puedes ver cómo aquí:

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

sigon
fuente
Muchas gracias. Pero esto requiere WebGL, ¿verdad?
knutole
1
Threejs es una biblioteca / API de JavaScript que aprovecha WebGL. Pero en el código solo tiene que incluir dos libs: three.js y OrbitControls.js (esto es para administrar la órbita de la cámara).
sigon
1
y sí, threejs solo funciona en navegadores compatibles con WebGL.
sigon
1

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

Tiene un mapa realmente genial que tiene una especie de proyección oblicua .

Pero no hay nada que lo haga fácil. D3 hace mi cabeza con respecto a la configuración de proyecciones. Sin embargo, puedes hacer cosas increíbles si trabajas en ello.

Alex Leith
fuente
OK, ¿cómo hace Mike eso? Gracias por el consejo
knutole
Así: bl.ocks.org/mbostock/3790444
John Haugeland
1

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

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

El resultado es un mapa resbaladizo similar al folleto: http://maps.osm2world.org/

AndreJ
fuente