OpenLayers / Leafletでアニメーションクラスターマーカーを作成する方法

Openlayersが一致しないように見える滑らかな遷移のために、私はLeafletを使用したいと思います。カスタムスタイルのマーカーグループでマーカーをクラスター化する機能が特に必要です。

私が達成しようとしていることを示す最良の例は、Redfinにあります。

クラスターにカーソルを合わせると滑らかなアニメーションが提供され、マーカーをクリックすると、アニメーション効果でクラスターが分割されます。個々のポイントが特定の許容範囲と重ならないズームレベルに達すると、実際のマーカーはアニメーション化された位置に分割されます。

似たような効果をこれらに統合したいので、最善のアプローチに関するいくつかのガイダンスや、あなたが知っているかもしれない他の例に感謝します。

注： Redfinは、使用したくないFlashを使用しているようです。理想的な状況では、可能であればJavascriptでこれを実現したいと思いますが、おそらくHTML5 / canvasで行う必要があると思います。

たぶんpの使用。-Raphael.jsまたはd3.js

何か案は？

ところで- この例は見つかりましたが、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コントロールも参照してください。SelectFeatureコントロールは、機能の上にマウスを置いたときの制御に役立ちます。

redfinは本当にファッションのサンプルです。OLでテストする時間があることを願っています:)

調べる時間はあまりありませんが、CloudMade（Leafletのメーカー）にはいくつかのマーカークラスタリング機能があります。それらをアニメーションで洗練されたものにする方法、それについてはわかりませんが、それは始まりです。

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をご覧ください。

これは最初のバージョンですが、クラスターに素晴らしいアニメーションを追加します。改善すべき点はたくさんありますが、それは出発点です。

クラスターが指すポリマップの例を見てきましたか？

ここの円は、cssを使用して変更できるベクトルです。