Perspective 3D sur les cartes dans Leaflet, CartoDB?

12

Existe-t-il une bibliothèque JS qui rendrait des cartes plates normales (comme Leaflet) dans une carte en perspective comme celle-ci, sur le Web:

entrez la description de l'image ici

De plus, quelqu'un a vu quoi que ce soit qui pourrait transformer les données CartoDB en représentation 3D, comme ça?

javascript leaflet 3d carto

— knutole
source

1

Je ne suis pas sûr de l'intégration avec cartodb, mais j'ai récemment vu ce post sur la création de cartes 3D à partir de QGIS en utilisant la bibliothèque three.js . Vous voudrez peut-être y jeter un œil.

— RyanKDalton

2

Voir aussi: Three.js + leaflet = 3D maps? sur StackOverflow

— RyanKDalton

1

Et quelques articles à examiner: Rendu des informations géographiques en 3D avec Three.js et D3.js , et Affichage des traces GPS en 3D avec three.js et d3.js

— RyanKDalton

1

Peut-être que vous trouvez cette visualisation utile: pluto.cartodb.com/viz/bf4dacd4-003c-11e3-aaf8-a9294e572fad/…

— javisantana

7

Vous pourriez peut-être utiliser Osmbuildings . C'est une bibliothèque JavaScript pour visualiser la géométrie du bâtiment OpenStreetMaps (ou GeoJSON personnalisé) dans une perspective 3D.

OSMbuildingJS

Il utilise directement les données OpenStreetMaps. Ajoutez simplement la méthode 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, vous pouvez charger votre propre GeoJSON. Modifiez simplement la méthode loadData () en setData (geojson):

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

Vos données doivent avoir une propriété de hauteur et vous pouvez modifier la couleur du mur et du toit de manière dynamique:

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

Et changez même la perspective de l'ombre en définissant le jour:

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

— sigon
source

La version actuelle des bâtiments OSM (0.2.2b) ne prend pas en charge la setDataméthode, mais setfonctionne! Il devient:var osmb = new OSMBuildings(map).setData(geoJSON);

— bradypus

4

C'est l'un des principaux cas d'utilisation de ViziCities (villes 3D dans le navigateur optimisé par OpenStreetMap), bien que les couches de données ne fonctionnent pas encore. Peut-être quelque chose à considérer pour l'avenir: https://github.com/robhawkes/vizicities

Avertissement: je suis le développeur de ViziCities

— Robin Hawkes
source

1

Projet sympa! De plus, bien qu'il soit assez évident qu'il s'agit d'un projet auquel vous êtes affilié, vous voudrez peut-être simplement le clarifier un peu (même s'il est open source).

— blah238

Merci, mais je recherche une solution non WebGL.

— knutole

1

Pas de soucis, je voulais juste vous prévenir.

— Robin Hawkes

Cette version a-t-elle les tracés ou toute version améliorée?

— joker21

2

Vous pouvez utiliser OSM2world pour transmettre des données 2D d'OpenStreetMap (map.osm) à des objets 3D (map.obj), puis utiliser un autre convertisseur ( convert_obj_three.py ) pour les convertir en un modèle JSON trois js (map.js), puis utiliser dans une scène en trois dimensions.

Vous pouvez voir comment ici:

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

— sigon
source

Merci beaucoup. Mais cela nécessite WebGL, non?

— knutole

1

Threejs c'est une bibliothèque / api javascript qui profite de WebGL. Mais dans le code, vous n'avez qu'à inclure deux bibliothèques: three.js et OrbitControls.js (c'est pour gérer l'orbite de la caméra).

— sigon

1

et oui, threejs ne fonctionne que dans les navigateurs pris en charge par WebGL.

— sigon

1

Le plus proche que j'ai vu est le travail de Mike Bostock .

Il a une carte vraiment cool qui a une sorte de projection oblique .

Mais rien ne facilite les choses. D3 fait ma tête en ce qui concerne la mise en place de projections. Vous pouvez faire des choses incroyables si vous y travaillez.

— Alex Leith
source

OK, comment Mike fait ça ?? Merci pour la pointe

— knutole

Comme ceci: bl.ocks.org/mbostock/3790444

— John Haugeland

1

http://osm2world.org/ fonctionne sans WebGL, mais utilise Java au lieu de js.

Conçu pour la sortie de données de bâtiments Openstreetmap, il devrait également être adoptable pour d'autres données 3D.

Le résultat est une carte glissante semblable à la brochure: http://maps.osm2world.org/

— AndreJ
source

1

Eh bien, avec CartoDB, vous pouvez faire quelque chose comme ceci http://andrewxhill.com/cartodb-examples/scroll-story/pluto/index.html#4

Vous devez utiliser ce paramètre CartoCSS: {building-height: 512; }

Plus d'informations ici: https://github.com/CartoDB/cartodb-pluto

— Óscar Martínez
source