Técnica de representación de lienzo fuera de la pantalla en Leaflet

Question

Estoy buscando una implementación de código abierto de la técnica del lienzo fuera de pantalla en Leaflet. Esta técnica es útil para acelerar la representación de miles de imágenes similares en un lienzo HTML5: la imagen se dibuja una vez en un objeto de lienzo que no forma parte del documento HTML, y luego se copia (como un mapa de bits) repetidamente en el lienzo visible.

Esto es un extracto de Lienzo denso, fuera de pantalla (@ckrahe) en CodePen:

_offscreen = document.createElement("canvas");
_otx = _offscreen.getContext("2d");
_otx.arc(CIRCLE_RADIUS, CIRCLE_RADIUS, CIRCLE_RADIUS, 0, (2*Math.PI));
_otx.fillStyle = "#0000ff";
_otx.fill();
...
_ctx.drawImage(_offscreen, (x - CIRCLE_RADIUS), (y - CIRCLE_RADIUS));

Esta aplicación de lienzo (es decir, no de Leaflet) dibuja 50,000 círculos en una fracción del tiempo que el enfoque ingenuo dibuja 1,000 (donde cada arco se dibuja y estiliza individualmente).

Considera este ejemplo de Leaflet 1.2 (genera aleatoriamente 50,000 L.CircleMarkers). Cada vez que el mapa se mueve, el evento 'moveend' activa llamadas internas de Leaflet a Canvas._updatePaths. El método de soporte, _actualizarCírculo, invoca 'arc' directamente en el lienzo visible.

_actualizarCirculo: function (capa) {

    if (!this._dibujando || capa._vacio()) { return; }

    var p = capa._punto,
        ctx = this._ctx,
        r = capa._radio,
        s = (capa._radioY || r) / r;

    this._capasDibujadas[capa._leaflet_id] = capa;

    if (s !== 1) {
        ctx.save();
        ctx.scale(1, s);
    }

    ctx.beginPath();
    ctx.arc(p.x, p.y / s, r, 0, Math.PI * 2, false);

    if (s !== 1) {
        ctx.restore();
    }

    this._llenarTrazo(ctx, capa);
},

Claramente cada L.CircleMarker tiene su propia referencia de objeto Options y, posiblemente, estilo. Pero es al menos concebible que un plugin podría, quizás con una pista, detectar capas similares y optimizar su dibujo.

¿Qué opinas?

Answer 1

Hay una serie de complementos para Leaflet que utilizan Canvas. Uno que viene a la mente es Leaflet.Canvas-Markers. ¿Este posiblemente se adapte a tu caso de uso?