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.


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 :) :)


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 :)


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




1

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

Lingkaran di sini adalah vektor yang dapat dimodifikasi menggunakan css.


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
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.