Leaflet.MarkerCluster 0.1 リリース

Dave Leaverによる2012年8月20日の投稿

これは、Leafletのアクティブな貢献者（特に、0.4ズームアニメーションの改善を実装した）であり、この投稿で紹介する最高のマーカークラスタリングプラグインの作者でもあるDave Leaver氏によるゲスト投稿です。

マップ上にマーカーを配置しているほとんどの人は、最終的にそれらのマーカーが重なり合うという問題に直面します。私の勤務先であるSmartrakでは、お客様のマップ上に何千ものポイントが表示されることがよくあります。ズームアウトすると、これらのマーカーはすべて重なり合ってしまい、マップが見づらく、雑然とした印象を与えます。また、最大ズームレベルでもマーカーが重なり、操作が不可能になる場合があります。さらに、マップ上に大量のマーカーがあると、パフォーマンスが許容できないレベルまで低下することがよくあります。

これを改善するために、多くのサイトではマーカークラスタリングを使用しています。これは、各ズームレベルで互いに近いマーカーをまとめてグループ化する手法です。この良い例としては、Redfinがあります。私たちはLeafletでこのような機能が必要でした。オープンソースの精神に基づき、私たちはソリューションを開発し、リリースしたので、誰もがその利点を利用できます。そこで、Leaflet.MarkerClusterを誇りを持って紹介します。

機能

このクラスタラーには、あらゆる種類の優れた動作が組み込まれています。

すべてが素晴らしいアニメーションで表示されます。ズームイン/ズームアウトすると、どのクラスタがどのマーカーになったかを論理的に確認できます。
非常に高速なので、例えば50,000ポイントのクラスタリングも問題ありません。また、すべての重い計算は最初のページ読み込み時に行われ、その後はマップはスムーズに動作します。
クラスタリングする必要のないマーカーはクラスタリングされず、関連するズームレベルで表示されます。
クラスタにマウスオーバーすると、そのクラスタ内にあるマーカーの境界が表示されます。
クラスタをクリックすると、その子の境界までズームインします。
一番下のズームレベルでまだクラスタがある場合は、クリックして「スパイダー化」することができます。これにより、クラスタ内の個々のマーカーを操作できるようになります（jawjのOverlapping MarkerSpidiferに基づく）。
ビューポートから画面幅よりも遠いクラスタとマーカーは、パフォーマンスを向上させるためにマップから削除されます。
コアLeafletと同様に、モバイルブラウザとデスクトップブラウザの両方で動作し、IE6までテストされています。
マップに追加された後にマーカーを追加および削除することをサポートしています（以下のベストプラクティスを参照してください！）。
高度にカスタマイズ可能で、クラスタの外観を簡単に変更したり、特定の機能を無効にしたり、クラスタのインタラクションにカスタム動作を追加したりできます。

使用方法

マーカークラスタラーの使用は簡単です。既存のレイヤグループの使用箇所をL.MarkerClusterGroupに置き換えるだけです。

var markers = new L.MarkerClusterGroup();

markers.addLayer(L.marker([175.3107, -37.7784]));
// add more markers here...

map.addLayer(markers);

また、個々のマーカーとクラスタの両方に対して、すべてのFeatureGroupイベント（および追加でclusterclick）を使用することもできます。

markers.on('clusterclick', function (a) { alert('Cluster Clicked'); });
markers.on('click', function (a) { alert('Marker Clicked'); });

ベストプラクティス

クラスタラーから最高のパフォーマンスを得るには、マップに追加する前にすべてのマーカーをクラスタラーに追加する必要があります（例で行ったように）。
L.MarkerClusterGroup内にあるマーカーを移動する場合は、まずマーカーを削除してから移動し、 फिर से 追加する必要があります。MarkerClusterGroup内にある間にマーカーを移動すると、追跡できなくなり、そのマーカーは失われます。
クラスタラーは、マップ上に表示されている間にマーカーを追加および削除することをサポートしていますが、マップ上に表示されていない間に追加された場合ほどのパフォーマンスは発揮されません。MarkerClusterGroup内のマーカーを大幅に更新する必要がある場合は、マップから削除してからマーカーを変更し、 फिर से 追加することをお勧めします。

入手方法

最新リリースは、GitHubのダウンロードページからダウンロードできます。

技術的な詳細

基礎となるクラスタリングアルゴリズム（MarkerClusterGroup._cluster）は、単純な貪欲法クラスタリングです。

foreach marker
    if there is a cluster within the clustering distance, join it.
    else if there is an unclustered marker within the clustering distance, form a cluster with it.

最初のクラスタリング手順は、最大（最下位）ズームレベルに対して行います。次に、結果として得られたすべてのマーカーとクラスタをクラスタリングして、次のズームレベルを生成します。これを最上位に達するまで繰り返します。これらのクラスタは、優れた地理空間的特性を持つツリー（クラスタには子クラスタが含まれる）に格納されます。このツリーを使用して、特定のズームレベルで画面上に表示されているマーカーとクラスタを特定することを最適化します。

L.DistanceGrid

L.DistanceGridは、クラスタリングを行う際に優れた最適化を提供します（LeafletのメンテナーであるVladimir氏による貢献）。

マーカーをクラスタリングするには、すべてのマーカーを他のすべてのマーカーと比較して、クラスタを形成する必要があります。これを高速化するには、比較する必要があるマーカーのセットを削減する必要があります。DistanceGridは、すべてのマーカーを検索する必要がある距離と同じサイズのグリッドに配置することで、これを実現します。そのため、クラスタリングするマーカーを探すときは、自分がいるグリッドの正方形とそのすぐ隣にあるマーカーだけを見れば済みます。これは、クラスタを形成する可能性の高いマーカーだけを見ることになるため、パフォーマンスの大幅な向上につながる可能性があります。（最初のPRで数値を確認してください）

最後に

このクラスタラーを気に入っていただければ幸いです。公開サイトで使用した場合は、メールでご連絡ください。確認して、GitHubサイトにリンクできる可能性があります。

問題が発生した場合は、GitHubページにバグを報告してください。

お楽しみください！
Dave Leaver.