Leafletで1万件越えのマーカーを同時表示(HTML5のCanvasを利用)

課題

LeafletのL.MarkerはDOMで描画するため遅い。
L.Mapのオプション「preferCanvas: true」、かつL.CircleMarkerを使えばCanvasで描画されるため軽いけど、デザインが限られる。
L.MarkerをCanvasで描画してくれるプラグインとして、Leaflet.Canvas-Markersがあるけど、
- 長らくメンテナンスされていない。(バグ修正のPRもマージされていない)
- 同一画像のアイコンでは早いけど、連番等を付加した、ひとつづつ違うアイコンではもっさり。
  - 2000個くらいから初回読取が遅くなった。
- （Canvas触ったことなかったのでお勉強もかねて新規作成）

方向性

L.Iconを引数とするL.CircleMarkerの拡張
L.CircleMarkerにCanvasでアイコン画像を重ねる。（Leaflet.BoatMarkerとやってることは同じ）
L.Iconのオプションにangleを持たせて、回転させる。
L.IconのpopupAnchorやoffsetに対応する。
同一アイコン出ない場合のもっさり問題は、アイコンは同一のままで、fillTextで文字列を追加。

ソースコード

Icon2CircleMarker.js

'use strict';
/*
L.Iconを渡すとアイコン付きのL.CircleMarkerが返ってくる。
*/
class Icon2CircleMarker{
  constructor(){
    //既存クラスのメソッド上書き
    this.icon2Canvas = L.CircleMarker.extend({
      _containsPoint: function(makerPoint) {
        //L.IconのoffsetをCircleMarkerへ適用
        const offset = this.options.icon.options.pointOffset;
        if(offset){
          return L.CircleMarker.prototype._containsPoint.call(this, makerPoint.subtract([offset.x, offset.y]));
        }
      },
      
      _updatePath() {
        const op = this.options.icon.options;
        if(op.element){
          const ctx = this._renderer._ctx,
            p = this._point.round();
          p.x += op.offset[0];
          p.y += op.offset[1];
          //Canvasへ描画開始
          ctx.save();
          ctx.translate(p.x, p.y);
          //アイコンの回転を適用
          if(op.angle){
            ctx.rotate(op.angle * 0.0174);//Math.PI / 180;  
          }
          const x = op.iconSize[0],
            y = op.iconSize[1];
          //drawImageでは描画位置は整数にすること (https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)
          ctx.drawImage(op.element, -Math.floor(x/2), -Math.floor(y/2), Math.floor(x), Math.floor(y));
          //文字は前面に出すため、drawImageの後に追加
          if(op.string){
            const count = op.string.length;
            //文字を中央にするため苦戦（アイコン、フォントによって変わるため適宜変更のこと）
            const fontsize = (x/count < x/2)
              ? (x/count) +4
              : x/2;
            ctx.font = fontsize + 'px sans serif';
            const offset = Math.floor(count * fontsize*1.3 /4);
            ctx.fillStyle = op.fontcolor;
            ctx.fillText(op.string,-offset,0);
          }
          ctx.restore();
        }else{
          const element = document.createElement('img');
          //element.onload = () => this.redraw();//redrawしないと画像が切れることがあるが、パフォーマンス優先
          element.src = op.iconUrl;//キャッシュが効かないと重いため、なるべく同一画像を
          op.element = element;
        }
      },
    });
  }

  getMarker(latlng, options){
    const op = options.icon.options;
    op.offset = [op.iconSize[0] / 2 - op.iconAnchor[0], op.iconSize[1] / 2 - op.iconAnchor[1]];
    op.popupAnchor = [0, 0];
    return new this.icon2Canvas(latlng, options);  
  }
}

使用例

const icm = new Icon2CircleMarker();
const max = 100000;
for(let i = 0; i < max; i++){
    const icon = L.icon({
        iconUrl: 'my-icon.png',
        iconSize: [38, 95],
        iconAnchor: [22, 94],
        popupAnchor: [-3, -76],
        /*シャドウには未対応
        shadowUrl: 'my-icon-shadow.png',
        shadowSize: [68, 95],
        shadowAnchor: [22, 94]*/
    });
    //L.iconへの追加オプション(プラグイン化の際にいい感じにする予定)
    icon.options['angle'] = 0; //アイコンの回転角。北を0として右回りで360°
    icon.options['string'] = hoge; //アイコンにかぶせる文字列
    icon.options['fontcolor'] = 'white'; //文字列の色
    //日本付近にマーカーをばらまく
    const marker = icm.getMarker([35 + Math.random()*10, 135 + Math.random()*10], {      
        popupAnchor: icon.options.popupAnchor,//L.IconのpopupAnchor引き継ぎ、offsetは自動処理
        radius: 10,//あくまでL.CircleMarkerなので不可視のサークルがある。（クリックの当たり判定でもある）
        icon: icon
    });
    layer.addLayer(marker);
}
layer.addTo(map);//layerとmapはそれぞれ適当なL.featureGroupとL.mapを指定してください。

使用例

使用環境
- CPU AMD Ryzen 5 3600 3.6Ghz
- GPU Nvidia Geforce GTX 1050
- Memory DDR4 16GB
- Google Chrome 105.0.5195.102

10万件の連番付マーカーの場合（初回表示に15秒くらいかかる。ズームレベル変更は7秒くらい）

10万件の方向付マーカーの場合（初回表示に17秒くらいかかる。ズームレベル変更は15秒くらい）

※　今回は角度をforループ内で順次割り当てています。

ToDo

プラグイン化
一度のズームレベルチェンジで複数回_updatePath()が走っているため原因究明、改善

追記

今更ながら、Leaflet 1.9.4で動作確認
（1.9.0ではマーカーが表示されないバグがあったが修正済み）