📍

【Flutter】google_maps_cluster_manager 利用メモ

2022/03/05に公開約1,500字

Flutterで表示しているGoogleMapの、クラスタリング(近いマーカーをまとめる)対応にて、
ライブラリ「google_maps_cluster_manager」を使用してみたのでメモ
基本的な内容は公式に書いてあるため、補足がメインとなります。

https://pub.dev/packages/google_maps_cluster_manager

google_maps_cluster_manager 概要

  • マーカーをまとめる計算は、ジオハッシュを用いる
    [参考] 位置情報データの扱い方(ジオハッシュとか)
    https://qiita.com/yabooun/items/da59e47d61ddff141f0c
  • 基本的には、マップの表示範囲内にあるマーカーに対してクラスタリング
    マップ表示範囲外も設定でクラスタリング対象とすることは可(表示領域の1倍〜2倍まで)
    デフォルトでは、マップの表示範囲の1.5倍の範囲でクラスタリング
main.dart
// オプション設定例
  ClusterManager _initClusterManager() {
    return ClusterManager<Place>(
    items, _updateMarkers,
        markerBuilder: _markerBuilder, // マーカー生成処理
        levels: [1, 4.25, 6.75, 8.25, 11.5, 14.5, 16.0, 16.5, 20.0],
        extraPercent: 0.2, // 追加のクラスタリング範囲(0.2の場合、マップ表示範囲の1.2倍)
        stopClusteringZoom: 17.0 // ズームレベルが17以上であればクラスタリングしない
	);
  }

levelsについて

Configure this if you want to change zoom levels at which the clustering precision change
(訳)クラスタリング精度を変更するズームレベルを変更する場合に設定します。

クラスタリング精度は、ジオハッシュの桁数によって変わり、
桁数と範囲の関係は以下の表となります。

桁数 南北の距離 東西の距離
1 4989600.00m 4050000.00m
2 623700.00m 1012500.00m
3 155925.00m 126562.50m
4 19490.62m 31640.62m
5 4872.66m 3955.08m
6 609.08m 988.77m
7 152.27m 123.60m
8 19.03m 30.90m
9 4.76m 3.86m
10 0.59m 0.97m

ジオハッシュの桁数とlevelsの関係は、要素の数・順番で決まる仕様となっており、
オプション設定例に記載した内容であれば、
levels[0](ズームレベル:1)は、ジオハッシュ1桁
levels[5](ズームレベル:14.5)は、ジオハッシュ6桁
となります。

現在のズームレベルが、levelsに指定した値に切り替わるタイミングで、
ジオハッシュの桁数が変更(クラスタリング範囲の拡大縮小)となります。

Discussion

ログインするとコメントできます