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
— 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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.