OpenLayers / Leaflet에서 애니메이션 클러스터 마커를 만드는 방법은 무엇입니까?

Openlayers가 일치 할 수없는 부드러운 전환으로 인해 Leaflet을 사용하고 싶습니다. 특히 사용자 정의 스타일의 마커 그룹으로 마커를 클러스터링하는 기능이 필요합니다.

내가 달성하려는 것을 보여주는 가장 좋은 예는 Redfin 에서 찾을 수 있습니다 .

클러스터 위로 마우스를 가져 가면 매끄러운 애니메이션이 제공되고 클러스터가 분할 된 마커를 클릭하면 애니메이션 효과가 나타납니다. 개별 포인트가 지정된 공차와 겹치지 않는 확대 / 축소 수준에 도달하면 실제 마커는 애니메이션 방식으로 해당 위치로 분할됩니다.

나는 이것들과 비슷한 효과를 통합하고 싶어하며 최선의 접근법이나 당신이 알고있는 다른 예제에 대한 약간의 지침에 감사드립니다.

참고 : Redfin은 멀리하고 싶은 Flash를 사용하는 것 같습니다. 이상적인 상황에서 가능한 경우 Javascript를 통해이를 달성하고 싶지만 HTML5 / 캔버스를 통해 수행해야한다고 생각합니다.

아마도 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 제어도 살펴보십시오.

redfin은 실제로 패션 샘플입니다. OL로 테스트 할 시간이 있기를 바랍니다. :)

아직 조사 할 시간이 많지 않았지만 CloudMade (리플릿 제작자)는 몇 가지 마커 클러스터링 기능을 가지고 있습니다. 애니메이션과 매끄럽게 만드는 방법, 확실하지 않지만 시작입니다.

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

전단지 사용자의 경우.

다음은 전단지 용 Google Maps MarkerClusterer의 포트입니다.

https://github.com/ideak/leafclusterer

방금 OpenLayers에 대해 소위 AnimatedCluster 전략을 구현했습니다. http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html 에서 자세한 내용을 볼 수 있습니다 .

Firt 버전 일 뿐이지 만 클러스터에 멋진 애니메이션을 추가합니다. 개선해야 할 것이 많지만 시작점입니다.

당신이 봤어 polymaps에 있는 클러스터 포인트 예?

여기서 원은 CSS를 사용하여 수정할 수있는 벡터입니다.