Perspektywa 3D na mapach w Ulotce, CartoDB?

12

Czy istnieje jakaś biblioteka JS, która renderowałaby normalne, płaskie mapy (takie jak Leaflet) w mapę perspektywiczną taką jak ta w Internecie:

wprowadź opis zdjęcia tutaj

Czy ktoś widział coś, co mogłoby przekształcić dane CartoDB w reprezentację 3D, na przykład?

javascript leaflet 3d carto knutole
źródło
1
Nie jestem pewien integracji z kartodbem, ale ostatnio widziałem ten post na temat tworzenia map 3D z QGIS przy użyciu biblioteki three.js . Możesz na to rzucić okiem.
RyanKDalton
2
Zobacz także: Three.js + ulotka = mapy 3D? na StackOverflow
RyanKDalton
1
I kilka artykułów do obejrzenia: Renderuj informacje geograficzne w 3D za pomocą Three.js i D3.js oraz Pokazuj trasy GPS w 3D za pomocą Three.js i d3.js
RyanKDalton
1
Może uznasz tę wizualizację za przydatną: pluto.cartodb.com/viz/bf4dacd4-003c-11e3-aaf8-a9294e572fad/…
javisantana

Odpowiedzi:

7

Może mógłbyś użyć Osmbuildings . Jest to biblioteka JavaScript do wizualizacji geometrii budynków OpenStreetMaps (lub niestandardowego GeoJSON) w perspektywie 3D.

OSMbuildingJS

Wykorzystuje bezpośrednio dane OpenStreetMaps. Wystarczy dodać metodę 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)

Lub możesz załadować własny GeoJSON. Wystarczy zmienić metodę loadData () na setData (geojson):

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

Twoje dane muszą mieć właściwość wysokość, a Ty możesz dynamicznie zmieniać kolor ścian i dachu:

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

A nawet zmień perspektywę cienia, ustawiając dzień:

osmb.setDate(new Date(2014, 3, 24, 13, 0));
Sigon
źródło
Obecna wersja Budynków OSM (0.2.2b) nie obsługuje setDatametody, ale setdziała! To znaczy:var osmb = new OSMBuildings(map).setData(geoJSON);
bradypus
4

Jest to jeden z głównych przypadków użycia ViziCities (miasta 3D w przeglądarce obsługiwanej przez OpenStreetMap), chociaż warstwy danych jeszcze nie działają. Być może coś do rozważenia na przyszłość: https://github.com/robhawkes/vizicities

Oświadczenie: Jestem programistą ViziCities

Robin Hawkes
źródło
1
Fajny projekt! Ponadto, chociaż jest dość oczywiste, że jest to projekt, z którym jesteś powiązany, możesz chcieć to nieco wyjaśnić (nawet jeśli jest to oprogramowanie typu open source).
blah238,
Dzięki, ale szukam rozwiązania innego niż WebGL.
knutole
1
Nie martw się, po prostu chciałem dać ci heads-up.
Robin Hawkes,
Czy ta wersja ma działki lub ulepszoną wersję?
joker21
2

Możesz użyć OSM2world do przekazania danych 2D z OpenStreetMap (map.osm) do obiektów 3D (map.obj), a następnie użyć innego konwertera ( convert_obj_three.py ), aby przekonwertować go na model JSON threejs (map.js), a następnie użyć w scenie Threejsa.

Możesz zobaczyć, jak tutaj:

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

Sigon
źródło
Wielkie dzięki. Ale to wymaga WebGL, prawda?
knutole
1
Threejs to biblioteka javascript / API korzystająca z WebGL. Ale w kodzie musisz podać tylko dwie biblioteki lib: three.js i OrbitControls.js (służy to do zarządzania orbitą kamery).
Sigon
1
i tak, threejs działa tylko w przeglądarkach obsługiwanych przez WebGL.
Sigon
1

Najbliższe, jakie widziałem, to praca Mike'a Bostocka .

Ma naprawdę fajną mapę, która ma swego rodzaju skośną projekcję .

Ale nic nie ułatwia. D3 zajmuje moją uwagę w kwestii ustawiania projekcji. Możesz jednak robić niesamowite rzeczy, jeśli nad tym pracujesz.

Alex Leith
źródło
OK, jak Mike to robi? Dzięki za wskazówkę
knutole
W ten sposób: bl.ocks.org/mbostock/3790444
John Haugeland
1

http://osm2world.org/ działa bez WebGL, ale używa Javy zamiast js.

Zaprojektowany do generowania danych budynków Openstreetmap, powinien być przystosowany również do innych danych 3D.

Wynikiem jest śliska mapa podobna do ulotki: http://maps.osm2world.org/

AndreJ
źródło