Leaflet, CartoDB haritalarında 3D perspektif?

12

Web'de normal, düz haritaları (Leaflet gibi) bu gibi bir perspektif haritasına dönüştürecek herhangi bir JS kütüphanesi var mı:

resim açıklamasını buraya girin

Ayrıca, CartoDB verilerini 3D gösterime dönüştürebilecek herhangi bir şey gördü, böyle mi?

javascript leaflet 3d carto

— knutole
kaynak

1

Cartodb ile entegrasyon konusunda emin değilim, ancak son zamanlarda three.js kütüphanesini kullanarak QGIS'ten 3D haritalar yapma hakkında bu gönderiyi gördüm . Buna bir göz atmak isteyebilirsiniz.

— RyanKDalton

2

Ayrıca bakınız: Three.js + broşür = 3D haritalar? StackOverflow

— RyanKDalton

1

Ve içine bakmak için birkaç makaleyi: 3D ile Three.js'ye ve d3.js Coğrafi Oluşturma Bilgisi ve three.js ve d3.js ile 3 boyutlu GPS izlerini gösteriliyor

— RyanKDalton

1

Belki de bu görselleştirmeyi yararlı bulursunuz

— javisantana

7

Belki Osmbuildings'i kullanabilirsiniz . OpenStreetMaps (veya özel GeoJSON) bina geometrisini 3B perspektifte görselleştirmek için bir JavaScript kütüphanesi.

OSMbuildingJS

OpenStreetMaps verilerini doğrudan kullanır. LoadData () yöntemini eklemeniz yeterlidir:

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)

Veya kendi GeoJSON'unuzu yükleyebilirsiniz. LoadData () yöntemini setData (geojson) olarak değiştirmeniz yeterlidir:

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

Verileriniz bir height özelliğine sahip olmalıdır ve duvar ve çatı rengini dinamik olarak değiştirebilirsiniz:

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

Ve hatta gündüz ayarlayarak gölge perspektifini değiştirin:

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

— sigon
kaynak

Mevcut OSM Binaları sürümü (0.2.2b) setDatayöntemi desteklemez , ancak setçalışır! Bu tjus olur:var osmb = new OSMBuildings(map).setData(geoJSON);

— bradypus

4

Bu, veri katmanları henüz çalışmıyor olsa da, ViziCities (tarayıcıdaki OpenStreetMap tarafından desteklenen 3D şehirler) için birincil kullanım durumlarından biridir. Belki de gelecek için dikkate alınması gereken bir şey: https://github.com/robhawkes/vizicities

Feragatname: ViziCities'in geliştiricisiyim

— Robin Hawkes
kaynak

1

Harika bir proje! Ayrıca, bunun bağlı olduğunuz bir proje olduğu oldukça açık olsa da, bunu biraz daha açık hale getirmek isteyebilirsiniz (açık kaynak olsa bile).

— blah238

Teşekkürler, ancak WebGL olmayan bir çözüm arıyorum.

— Mart'ta knutole

1

Endişeye gerek yok, sadece size kulak vermek istedim.

— Robin Hawkes

Bu versiyonun grafikleri veya herhangi bir geliştirilmiş versiyonu var mı?

— joker21

2

OSM2world'ü kullanarak 2B verileri OpenStreetMap'ten (map.osm) 3B nesnelere (map.obj) geçirmek için kullanabilir, ardından başka bir dönüştürücü ( convert_obj_three.py ) kullanarak üç boyutlu bir JSON modeline (map.js) dönüştürebilirsiniz. Üçlü sahnede.

Nasıl yapılacağını buradan görebilirsiniz:

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

— sigon
kaynak

Çok teşekkürler. Ancak bu WebGL gerektirir, değil mi?

— Mart'ta knutole

1

Threejs WebGL'den yararlanan bir javascript kütüphanesi / api. Ancak kodda sadece iki libs eklemeniz gerekir: three.js ve OrbitControls.js (bu kamera yörüngesini yönetmek içindir).

— sigon

1

ve evet, threejs yalnızca WebGL tarafından desteklenen tarayıcılarda çalışır.

— sigon

1

En yakın gördüğüm Mike Bostock'un çalışması .

Bir tür eğik izdüşümü olan gerçekten harika bir haritası var .

Ama bunu kolaylaştıran hiçbir şey yok. D3, projeksiyonlar yapmak konusunda başıma geliyor. Eğer üzerinde çalışıyorsanız şaşırtıcı şeyler yapabilirsiniz.

— Alex Leith
kaynak

Tamam, Mike bunu nasıl yapıyor ??

— Tavsiye

Şunun

— John Haugeland

1

http://osm2world.org/ WebGL olmadan çalışır, ancak js yerine Java kullanır.

Openstreetmap bina verilerinin çıktısı için tasarlandığından, diğer 3D veriler için de kabul edilebilir olmalıdır.

Çıktı broşürüne benzer kaygan bir haritadır: http://maps.osm2world.org/

— Andrej
kaynak

1

CartoDB ile böyle bir şey yapabilirsiniz http://andrewxhill.com/cartodb-examples/scroll-story/pluto/index.html#4

Bu CartoCSS parametresini kullanmanız gerekir: {building-height: 512; }

Daha fazla bilgi burada: https://github.com/CartoDB/cartodb-pluto

— Martínezscar Martínez
kaynak