23 - マーカークラスタリングの概念

学習内容: 多数のマーカーをグループ化して表示するクラスタリングの基本概念を学びます。

ポイント:

多数のマーカーを距離に基づいてグループ化
ズームレベルに応じてクラスタを分割/結合
クラスタアイコンで含まれるマーカー数を表示
実際のプロジェクトでは Leaflet.markercluster プラグインを使用

注意: これは概念を理解するためのシンプルな実装です。本番では専用プラグインを推奨します。

// シンプルなクラスタリングの概念
// 実際のプロジェクトでは Leaflet.markercluster を使用してください

// マーカーをクラスタ化する関数
function clusterMarkers(markers, radius) {
    const clusters = [];

    markers.forEach(marker => {
        let added = false;

        // 既存のクラスタに追加できるか確認
        for (let cluster of clusters) {
            if (distance(marker, cluster.center) < radius) {
                cluster.markers.push(marker);
                added = true;
                break;
            }
        }

        // 新しいクラスタを作成
        if (!added) {
            clusters.push({
                center: marker.getLatLng(),
                markers: [marker]
            });
        }
    });

    return clusters;
}