Perspektif 3D pada peta di Leaflet, CartoDB?

12

Apakah ada perpustakaan JS di luar sana yang akan membuat peta datar dan normal (seperti Leaflet) menjadi peta perspektif seperti ini, di web:

masukkan deskripsi gambar di sini

Juga, ada yang melihat sesuatu yang bisa mengubah data CartoDB menjadi representasi 3D, seperti ini?

javascript leaflet 3d carto knutole
sumber
1
Saya tidak yakin tentang integrasi dengan cartodb, tetapi saya baru-baru ini melihat posting ini tentang membuat peta 3D dari QGIS menggunakan perpustakaan three.js . Anda mungkin ingin melihatnya.
RyanKDalton
2
Lihat juga: Three.js + leaflet = Peta 3D? tentang StackOverflow
RyanKDalton
1
Dan beberapa artikel untuk melihat: Render Informasi Geografis dalam 3D Dengan Three.js dan D3.js , dan Menampilkan trek GPS dalam 3D dengan three.js dan d3.js
RyanKDalton
1
Mungkin Anda menemukan visualisasi ini berguna: pluto.cartodb.com/viz/bf4dacd4-003c-11e3-aaf8-a9294e572fad/…
javisantana

Jawaban:

7

Mungkin Anda bisa menggunakan Osmbuildings . Ini perpustakaan JavaScript untuk memvisualisasikan OpenStreetMaps (atau custom GeoJSON) membangun geometri menjadi perspektif 3D.

OSMbuildingJS

Ini menggunakan data OpenStreetMaps secara langsung. Cukup tambahkan metode 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)

Atau, Anda bisa memuat GeoJSON Anda sendiri. Cukup ubah metode loadData () ke setData (geojson):

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

Data Anda harus memiliki properti ketinggian, dan Anda dapat mengubah warna dinding dan atap secara dinamis:

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

Dan bahkan mengubah perspektif bayangan dengan menetapkan siang hari:

osmb.setDate(new Date(2014, 3, 24, 13, 0));
sigon
sumber
Versi OSM Building saat ini (0.2.2b) tidak mendukung setDatametode, tetapi setberfungsi! Ini menjadi:var osmb = new OSMBuildings(map).setData(geoJSON);
bradypus
4

Ini adalah salah satu kasus penggunaan utama untuk ViziCities (kota 3D di browser yang didukung oleh OpenStreetMap), meskipun lapisan data saat ini belum berfungsi. Mungkin sesuatu yang perlu dipertimbangkan untuk masa depan: https://github.com/robhawkes/vizicities

Penafian: Saya adalah pengembang ViziCities

Robin Hawkes
sumber
1
Proyek keren! Selain itu, walaupun cukup jelas bahwa ini adalah proyek yang Anda berafiliasi, Anda mungkin ingin membuatnya sedikit lebih jelas (bahkan jika itu open source).
blah238
Terima kasih, tetapi saya sedang mencari solusi non-WebGL.
knutole
1
Jangan khawatir, hanya ingin memberi Anda informasi.
Robin Hawkes
Apakah versi ini memiliki plot atau versi yang lebih baik?
joker21
2

Anda dapat menggunakan OSM2world untuk meneruskan data 2D dari OpenStreetMap (map.osm) ke objek 3D (map.obj), kemudian menggunakan konverter lain ( convert_obj_three.py ) untuk mengubahnya menjadi model JSON tigajs (map.js), dan kemudian menggunakan dalam adegan threejs.

Anda dapat melihat caranya di sini:

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

sigon
sumber
Terima kasih banyak. Tapi ini membutuhkan WebGL, kan?
knutole
1
Threejs itu adalah pustaka javascript / api yang memanfaatkan WebGL. Tetapi dalam kode Anda hanya perlu memasukkan dua libs: three.js dan OrbitControls.js (ini untuk mengelola orbit kamera).
sigon
1
dan ya, threejs hanya berfungsi di browser yang didukung oleh WebGL.
sigon
1

Yang paling dekat yang saya lihat adalah karya Mike Bostock .

Dia memiliki peta yang sangat keren yang memiliki semacam proyeksi miring .

Tapi tidak ada yang membuatnya mudah. D3 mengerjakan tugas saya sehubungan dengan pengaturan proyeksi. Anda dapat membuat hal-hal luar biasa jika Anda melakukannya.

Alex Leith
sumber
OK, bagaimana cara Mike melakukan itu ?? Terima kasih atas tip
knutole
Seperti ini: bl.ocks.org/mbostock/3790444
John Haugeland
1

http://osm2world.org/ bekerja tanpa WebGL, tetapi menggunakan Java dan bukan js.

Dirancang untuk output data bangunan Openstreetmap, itu juga harus dapat diadopsi untuk data 3D lainnya.

Outputnya adalah peta licin mirip dengan leaflet: http://maps.osm2world.org/

AndreJ
sumber