Perspectiva 3D em mapas no Leaflet, CartoDB?

12

Existe alguma biblioteca JS por aí que renderize mapas planos e normais (como o Leaflet) em um mapa em perspectiva como este, na Web:

insira a descrição da imagem aqui

Além disso, alguém viu algo que pudesse transformar dados do CartoDB em representação 3D, assim?

javascript leaflet 3d carto knutole
fonte
1
Não tenho certeza sobre a integração com o cartodb, mas recentemente vi este post sobre a criação de mapas 3D do QGIS usando a biblioteca three.js . Você pode dar uma olhada nisso.
RyanKDalton
2
Veja também: Three.js + folheto = mapas 3D? No StackOverflow
RyanKDalton 18/03/2014
1
E um par de artigos de olhar para: Renda a informação geográfica em 3D Com Three.js e D3.js , e Mostrando trilhas de GPS em 3D com three.js e d3.js
RyanKDalton
1
Talvez você encontrar esta visualização útil: pluto.cartodb.com/viz/bf4dacd4-003c-11e3-aaf8-a9294e572fad/...
javisantana

Respostas:

7

Talvez você possa usar Osmbuildings . É uma biblioteca JavaScript para visualizar o OpenStreetMaps (ou GeoJSON personalizado) criando geometria em uma perspectiva 3D.

OSMbuildingJS

Ele usa os dados do OpenStreetMaps diretamente. Basta adicionar o 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)

Ou você pode carregar seu próprio GeoJSON. Apenas mude o método loadData () para setData (geojson):

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

Seus dados precisam ter uma propriedade height e você pode alterar a cor da parede e do telhado dinamicamente:

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

E até mude a perspectiva da sombra definindo o dia:

osmb.setDate(new Date(2014, 3, 24, 13, 0));
sigon
fonte
A versão atual do OSM Buildings (0.2.2b) não suporta setDatamétodo, mas setfunciona! É tjus torna-se:var osmb = new OSMBuildings(map).setData(geoJSON);
bradypus
4

Este é um dos principais casos de uso do ViziCities (cidades 3D no navegador desenvolvido pelo OpenStreetMap), embora as camadas de dados ainda não estejam funcionando no momento. Talvez algo a considerar para o futuro: https://github.com/robhawkes/vizicities

Disclaimer: Eu sou o desenvolvedor do ViziCities

Robin Hawkes
fonte
1
Projeto legal! Além disso, embora seja bastante óbvio que este é um projeto ao qual você é afiliado, convém deixar isso um pouco mais claro (mesmo que seja de código aberto).
blah238
Obrigado, mas estou procurando uma solução não WebGL.
knutole
1
Não se preocupe, só queria lhe dar um aviso.
Robin Hawkes
Esta versão possui plotagens ou alguma versão aprimorada?
Joker21
2

Você pode usar o OSM2world para transmitir dados 2D do OpenStreetMap (map.osm) para objetos 3D (map.obj) e, em seguida, usar outro conversor ( convert_obj_three.py ) para convertê-lo em um modelo JSON threejs (map.js) e, em seguida, usar em uma cena de três garotos.

Você pode ver como aqui:

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

sigon
fonte
Muito obrigado. Mas isso requer WebGL, certo?
knutole
1
Threejs é uma biblioteca javascript / API que tira proveito do WebGL. Mas no código você só precisa incluir duas bibliotecas: three.js e OrbitControls.js (é para gerenciar a órbita da câmera).
21414 sigon
1
e sim, threejs funciona apenas em navegadores suportados pelo WebGL.
21414 sigon
1

O mais próximo que vi é o trabalho de Mike Bostock .

Ele tem um mapa muito legal que tem uma espécie de projeção oblíqua .

Mas não há nada que facilite. D3 faz minha cabeça em relação à criação de projeções. Você pode fazer coisas incríveis, se trabalhar nisso.

Alex Leith
fonte
OK, como Mike faz isso? Obrigado pela dica
knutole 19/03/14
Assim: bl.ocks.org/mbostock/3790444
John Haugeland
1

http://osm2world.org/ funciona sem o WebGL, mas usa Java em vez de js.

Projetado para a saída de dados de edifícios Openstreetmap, deve ser adotável para outros dados 3D também.

O resultado é um mapa escorregadio semelhante ao folheto: http://maps.osm2world.org/

AndreJ
fonte