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

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

1

Bem, com o CartoDB, você pode fazer algo assim http://andrewxhill.com/cartodb-examples/scroll-story/pluto/index.html#4

Você precisa usar este parâmetro CartoCSS: {building-height: 512; }

Mais informações aqui: https://github.com/CartoDB/cartodb-pluto

— Óscar Martínez
fonte