Bagaimana Cara Membuat Penanda Cluster Animasi di OpenLayers / Leaflet?

19

Saya ingin menggunakan Leaflet karena transisi yang mulus yang sepertinya tidak cocok dengan Openlayers. Saya secara khusus memerlukan kemampuan untuk mengelompokkan marker dengan grup marker bergaya khusus.

Contoh terbaik yang menunjukkan apa yang saya coba capai dapat ditemukan di Redfin .

Harap perhatikan melayang di atas kluster yang menyediakan animasi yang apik dan dengan mengklik marker, klaster terpecah dengan efek animasi. Saat mencapai tingkat pembesaran di mana masing-masing titik tidak tumpang tindih dengan toleransi yang diberikan, penanda aktual dibagi ke lokasi mereka dengan cara yang animasi.

Saya benar-benar ingin mengintegrasikan efek yang serupa dengan ini dan akan menghargai beberapa panduan tentang pendekatan terbaik atau contoh lain yang mungkin Anda ketahui.

Catatan: Redfin tampaknya menggunakan Flash yang ingin saya hindari. Dalam situasi yang ideal saya ingin mencapai ini melalui Javascript jika mungkin tetapi berpikir itu mungkin perlu dilakukan melalui HTML5 / kanvas.

Mungkin penggunaan p. - Raphael.js atau d3.js

Ada ide?

BTW - menemukan contoh ini tetapi tampaknya secara khusus berlaku untuk Google Maps.

openlayers-2 web-mapping javascript clustering leaflet NetConstructor.com
sumber
Saya tidak berpikir Redfin menggunakan flash. Sepertinya itu semua javascript menggunakan dojo toolkit ( dojotoolkit.org ). Saya tidak menemukan perpustakaan pemetaan lain - mereka bisa menggunakannya juga.
djq
Saat ini saya sedang mengembangkan lapisan pengelompokan Leaflet - github.com/cavis/leafpile Ini belum melakukan hal yang benar-benar mewah, tapi saya berencana menambahkan hal-hal seperti gambar marker yang dapat disesuaikan dan strategi transisi zoom. Jangan ragu untuk menambahkan permintaan peningkatan ke pelacak masalah.
cavis

Jawaban:

22

Jika Anda menginginkan pengelompokan seperti redfin maka periksa Leaflet.markercluster saya: https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-realworld.388.html

https://github.com/danzel/Leaflet.markercluster

Ini sepenuhnya animasi dll :) :)

Dave Leaver
sumber
3
Yup - yang terbaik dan biarkan saya menjadi yang pertama untuk menyambut Anda Dave dan biarkan saya meningkatkan poin Anda untuk bantuan Anda.
NetConstructor.com
1
Cukup mengagumkan! +1
unicoletti
6

OpenLayers juga memiliki strategi cluster. Yang perlu Anda lakukan adalah menentukan sebagai strategi di lapisan vektor.

Solusinya sangat "sederhana" untuk saat ini, cukup kurangi jumlah titik tergantung pada tingkat zoom. Jika Anda membutuhkan sesuatu yang lebih hebat, Anda perlu memprogramnya sendiri dan kebutuhan Anda. Lihatlah juga ke kontrol SelectFeature yang dapat membantu Anda mengontrol ketika Anda meletakkan mouse di atas fitur.

Redfin benar-benar contoh fesyen. Semoga saya punya waktu untuk melakukan tes dengan OL :)

EricSonaron
sumber
Saya ingin menggunakan OpenLayers tetapi saya membutuhkan transisi yang mulus seperti yang ditemukan di selebaran. Apakah Anda mengetahui adanya peretas openlayers yang mereplikasi animasi zoom yang apik ini?
NetConstructor.com
Maaf tapi tidak. Saat ini saya sedang melakukan beberapa pengujian gaya sedikit "titik" menambahkan beberapa warna dan menghitung angka dalam lingkaran. Tetapi menambahkan animasi masih jauh untuk saat ini.
EricSonaron
Apakah Anda pernah menemukan solusi untuk ini dengan kemampuan ol3 baru?
NetConstructor.com
3

Untuk Pengguna Leaflet.

Berikut adalah port dari Google Maps MarkerClusterer untuk Leaflet

https://github.com/ideak/leafclusterer

ns-1m
sumber
Ya, saya memiliki bookmark itu tetapi saya masih memerlukan bagian animasi
NetConstructor.com
1

Sudahkah Anda melihat contoh polymaps yang menunjukkan titik-titik cluster?

Lingkaran di sini adalah vektor yang dapat dimodifikasi menggunakan css.

djq
sumber
terima kasih tetapi saya secara khusus telah mencari segala jenis solusi (lebih disukai didukung lintas-browser) yang akan memungkinkan untuk animasi marker. Saya tidak yakin apakah Anda berkesempatan untuk melihat contoh tautan ( redfin.com/... ) dari Redfin. Tautan tersebut mewakili apa yang ingin saya capai - representasi animasi apik semakin dalam Anda mengklik / masuk / memperbesar ke area / penanda berkerumun.
NetConstructor.com