OpenLayers / Leaflet'te Hareketli Küme İşaretleyicileri Nasıl Oluşturulur?


19

Openlayers'ın eşleşemeyecekleri gibi görünen yumuşak geçişler nedeniyle Leaflet'i kullanmak istiyorum. Özel olarak işaretleyicileri özel stilli işaretleyici gruplarıyla kümelendirme yeteneğini istiyorum.

Neyi başarmaya çalıştığımı gösteren en iyi örnek Redfin'de bulunabilir .

Bir kümenin üzerine gelmenin kaygan bir animasyon sağladığını ve kümelerin animasyonlu bir efektle ayrıldığı bir işaretçiyi tıklayarak dikkat edin. Tek tek noktaların belirli bir toleransla örtüşmediği bir yakınlaştırma düzeyine ulaştığınızda, gerçek işaretçiler animasyonlu bir şekilde konumlarına ayrılır.

Bunlara benzer etkileri gerçekten dahil etmek isterim ve farkında olabileceğiniz en iyi yaklaşım veya diğer örnekler konusunda bazı rehberliklerden memnun olurum.

Not: Redfin, uzak durmak istediğim Flash kullanıyor gibi görünüyor. İdeal bir durumda bunu mümkünse Javascript ile başarmak istiyorum ancak muhtemelen HTML5 / canvas üzerinden yapılması gerektiğini düşünüyorum.

Belki de p. - Raphael.js veya d3.js

Herhangi bir fikir?

BTW - bu örneği buldu, ancak özellikle Google Haritalar için geçerli gibi görünüyor.


Redfin'in flaş kullandığını sanmıyorum. Dojo araç setini ( dojotoolkit.org ) kullanan tüm javascript gibi görünüyor . Başka haritalama kütüphaneleri görmedim - onları da kullanıyor olabilirler.
djq

Şu anda bir Leaflet kümeleme katmanı geliştiriyorum - github.com/cavis/leafpile Henüz gerçekten süslü bir şey yapmıyor, ancak özelleştirilebilir işaretleyici görüntüleri ve yakınlaştırma geçiş stratejileri gibi şeyler eklemeyi planlıyorum. Sorun izleyiciye geliştirme istekleri eklemekten çekinmeyin.
cavis

Yanıtlar:



6

OpenLayers'ın da bir küme stratejisi var. Tek yapmanız gereken vektör katmanında strateji olarak belirtmektir.

Çözüm şu an için çok basittir, zum seviyesine bağlı olarak nokta sayısını azaltır. Daha harika bir şeye ihtiyacınız varsa, kendiniz ve ihtiyaçlarınıza göre programlamanız gerekir. Fareyi bir özelliğin üzerine getirdiğinizde kontrol etmenize hizmet edebilecek SelectFeature kontrolüne de göz atın.

Redfin gerçekten moda örneğidir. Umarım OL ile biraz test yapmak için biraz zamanım var :)


OpenLayers kullanmak istiyorum ama broşürde bulunanlar gibi yumuşak geçişlere ihtiyacım var. Bu kaygan zum animasyonlarını çoğaltan herhangi bir açık oyuncu hackinden haberdar mısınız?
NetConstructor.com

Üzgünüm ama hayır. Şu anda daire bazı renk ve sayma sayısı ekleyerek biraz "noktalar" bazı test stil yapıyorum. Ancak animasyon eklemek şu an için çok uzak.
EricSonaron

Yeni ol3 özellikleriyle buna bir çözüm buldunuz mu?
NetConstructor.com




1

Baktığınız polymaps hangi kümeleri noktaları Örneğin?

Buradaki daireler, css kullanılarak değiştirilebilen vektörlerdir.


teşekkürler ama özellikle belirteçlerin animasyon için izin verecek herhangi bir çözüm (tercihen çapraz tarayıcı destekli) arıyordum. Redfin'den bağlantı örneğini ( redfin.com/… ) kontrol etme fırsatınız olup olmadığından emin değilim . Bu bağlantı elde etmek istediğim şeyi temsil ediyor - kümelenmiş işaretleyicilere / alanlara daha derin tıkladığınızda / içine / yakınlaştırdığınızda kaygan işaretçi animasyon gösterimleri.
NetConstructor.com
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.