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

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

1

Cóż, dzięki CartoDB możesz zrobić coś takiego: http://andrewxhill.com/cartodb-examples/scroll-story/pluto/index.html#4

Musisz użyć tego parametru CartoCSS: {wysokość budynku: 512; }

Więcej informacji tutaj: https://github.com/CartoDB/cartodb-pluto

— Óscar Martínez
źródło