AngularでGoogleMap上のクラスター再描画が重くてハマった件

GoogleMapに0個～1000個のマーカー設置を切り替えるのをマーカーの追加/削除で対応していたらクラスターの再描画が重くて使い物にならなかったのでその対応方法。

結論

• マーカーの表示/消去はマーカーの追加/削除ではなくvisibleプロパティを使用する。

• クラスターにはignoreHidden=trueを設定する。

環境

• Angular: 12.2.0
• @agm/core: 3.0.0-beta.0
• @agm/markercluster: 3.0.0-beta.0
• @google/markerclusterplus

修正概要

改善前

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [minZoom]="minZoom" [maxZoom]="maxZoom">
  <agm-marker-cluster imagePath="(クラスタ画像パス)">
    <agm-marker *ngFor="let marker of markerList" [latitude]="marker.lat" [longitude]="marker.lng" iconUrl="(マーカー画像パス)"></agm-marker>
  </agm-marker-cluster>
</agm-map>

改善前は*ngForでマーカー一覧(markerList)を設定しており表示対象の項目が変わるたびに全マーカー一覧からfilter()で絞った結果をmarkerListに設定していた。

この場合markerListが再設定されるたびに<agm-marker>のDOMが再構築され、それをトリガーにGoogleMap上に実際に表示されているクラスターのDOMが再構築されるのだが<agm-marker>が構築/削除されるたびにクラスター描画が行われているのか15秒程度GoogleMapが固まりさらにクラスター表示も一時的に変に重なったりして非常に重い。

改善後

マーカー一覧(markerList)の再設定をしてはいけないことが分かったのでmarkerListには全マーカー一覧をまず設定しておく。
そのうえで表示するマーカーにはvisible=true、表示しないマーカーにはvisible=falseを設定し、クラスター側でもignoreHidden=trueを設定することでvisible=falseのマーカーをクラスター対象外にする。
※表示するマーカー一覧を変更するときはmarkerListの配列インスタンスを変えずにvisibleプロパティのみを書き換える。

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [minZoom]="minZoom" [maxZoom]="maxZoom">
  <agm-marker-cluster imagePath="(クラスタ画像パス)" [ignoreHidden]="true">
    <agm-marker *ngFor="let marker of markerList" [latitude]="marker.lat" [longitude]="marker.lng" iconUrl="(マーカー画像パス)" [visible]="marker.visible"></agm-marker>
  </agm-marker-cluster>
</agm-map>

https://angular-maps.com/api-docs/agm-core/directives/agmmarker#visible
https://angular-maps.com/api-docs/markerclusterer/directives/agmmarkercluster#ignoreHidden

こうすることで<agm-marker>のDOM再構築がなくなるのでクラスターの再描画回数が減り問題ないレベルになった。
ただし、マーカーのvisibleを変更したらMarkerClusterer.repaint().もコールするようにと上記ドキュメントに記載されているが<agm-marker-cluster>ディレクティブのインスタンスをコンポーネント側でどうやって取得するのかがいまだ不明※。
そのため、クラスター画像の更新がされないのでZoom値を強制的に変えるなりして強制再描画を行っている。

※ClusterManagerをDIしてgetClustererInstance()で取得できそうだったが取得しても別のインスタンスっぽくてrepaint()しても再描画されなかったがやり方がよくなかったか。。
https://angular-maps.com/api-docs/markerclusterer/injectables/clustermanager#getClustererInstance

まあ、使用しているAgmMapライブラリは2年近くアップデートされていないのでこちらより@angular/google-mapsを使用したほうがよいとは思う。

以下のサイトは大変参考になりました。上記のライブラリを使っているようでrepaint()も実施できている模様。