วิธีสร้างเครื่องหมายคลัสเตอร์เคลื่อนไหวใน OpenLayers / Leaflet

ฉันต้องการใช้ Leaflet เนื่องจากการเปลี่ยนที่ราบรื่นซึ่ง Openlayers ดูเหมือนว่าพวกเขาไม่สามารถจับคู่ได้ ฉันต้องการความสามารถในการจัดกลุ่มเครื่องหมายด้วยกลุ่มเครื่องหมายสไตล์ที่กำหนดเองโดยเฉพาะ

ตัวอย่างที่ดีที่สุดซึ่งแสดงให้เห็นถึงสิ่งที่ฉันกำลังพยายามที่จะบรรลุสามารถพบได้ที่Redfin

โปรดสังเกตว่าการวางเมาส์เหนือคลัสเตอร์จะมีภาพเคลื่อนไหวที่ลื่นและโดยคลิกที่เครื่องหมายกลุ่มจะแยกออกเป็นเอฟเฟกต์แบบเคลื่อนไหว เมื่อถึงระดับการย่อ / ขยายที่แต่ละจุดไม่ทับซ้อนกับความอดทนที่กำหนดเครื่องหมายที่แท้จริงจะแบ่งออกเป็นตำแหน่งที่ตั้งในแบบเคลื่อนไหว

ฉันชอบที่จะรวมเอฟเฟกต์ที่คล้ายกันเข้ากับสิ่งเหล่านี้และจะขอบคุณคำแนะนำเกี่ยวกับวิธีการที่ดีที่สุดหรือตัวอย่างอื่น ๆ ที่คุณอาจจะทราบ

หมายเหตุ: Redfin ดูเหมือนว่าจะใช้แฟลชที่ฉันต้องการอยู่ห่างจาก ในสถานการณ์ที่ดีที่สุดฉันต้องการบรรลุสิ่งนี้ผ่าน Javascript หากเป็นไปได้ แต่คิดว่าอาจต้องทำผ่าน HTML5 / canvas

บางทีการใช้ p - Raphael.js หรือ d3.js

ความคิดใด ๆ

BTW - พบตัวอย่างนี้แต่ดูเหมือนจะใช้กับ Google แผนที่โดยเฉพาะ

หากคุณต้องการให้คลัสเตอร์เหมือน Redfin ให้ดูที่ Leaflet.markercluster ของฉัน: https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-realworld.388.html

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

มันเป็นแอนิเมชั่นเต็มรูปแบบ ฯลฯ ฯลฯ :)

OpenLayers ยังมีกลยุทธ์คลัสเตอร์ สิ่งที่คุณต้องทำคือระบุกลยุทธ์ในเลเยอร์เวกเตอร์

การแก้ปัญหาคือ "ง่าย" สำหรับช่วงเวลาเพียงลดจำนวนจุดขึ้นอยู่กับระดับการซูม หากคุณต้องการอะไรที่ยอดเยี่ยมกว่านี้คุณจะต้องตั้งโปรแกรมด้วยตัวเองและตามความต้องการของคุณ ดูที่การควบคุม SelectFeature ซึ่งสามารถให้คุณควบคุมได้เมื่อคุณวางเมาส์ไว้เหนือคุณสมบัติ

The redfin เป็นตัวอย่างแฟชั่นจริง ๆ หวังว่าฉันจะมีเวลาทดสอบ OL :)

ฉันไม่มีเวลามากพอที่จะตรวจสอบ แต่ CloudMade (ผู้ผลิต Leaflet) มีความสามารถในการทำคลัสเตอร์มาร์กเกอร์ วิธีทำให้พวกเขามีชีวิตชีวาและโฉบเฉี่ยวไม่แน่ใจเกี่ยวกับสิ่งนั้น แต่เป็นการเริ่มต้น

http://developers.cloudmade.com/projects/web-maps-api/examples/marker-clustering

สำหรับผู้ใช้แผ่นพับ

นี่คือพอร์ตของ Google Maps MarkerClusterer สำหรับ Leaflet

https://github.com/ideak/leafclusterer

ฉันเพิ่งใช้กลยุทธ์ AnimatedCluster สำหรับ OpenLayers คุณสามารถดูข้อมูลเพิ่มเติมได้ที่: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

มันเป็นเพียงรุ่น firts แต่เพิ่มภาพเคลื่อนไหวที่ดีให้กับกลุ่ม มีหลายสิ่งที่ต้องปรับปรุง แต่มันเป็นจุดเริ่มต้น

คุณเคยดูตัวอย่างpolymapsที่กลุ่มชี้?

วงกลมที่นี่คือเวกเตอร์ซึ่งสามารถแก้ไขได้โดยใช้ CSS