leaflet 加载canvas

//声明图层组
this.hisRescueLayer = L.layerGroup().addTo(this.map);

this.showHisRescueLayer();

showHisRescueLayer(){

    this.hisRescueLayer.clearLayers();
    var myIcon = L.divIcon({
        html: '<canvas style="background:rgba(55,221,64,0.03);z-index: 1;opacity:1" id="tutorial" width="100" height="100"></canvas>',
        iconSize: 100,
        className: 'my-div-icon'
    });
    let layer=L.marker([38.0103, 114.53003], { icon: myIcon});



    this.hisRescueLayer.addLayer(layer);

    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");


    setInterval(function (){
        var size = 100;
        var duration = 1000;
        var t = (performance.now() % duration) / duration;

        var radius = size / 2 * 0.3;
        var outerRadius = size / 2 * 0.7 * t + radius;

        // draw outer circle
        ctx.clearRect(0, 0, size, size);
        ctx.beginPath();
        ctx.arc(size / 2, size / 2, outerRadius, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(255, 200, 200,' + (1 - t) + ')';
        ctx.fill();

        // draw inner circle
        ctx.beginPath();
        ctx.arc(size / 2, size / 2, radius, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(255, 100, 100, 1)';
        ctx.strokeStyle = 'white';
        ctx.lineWidth = 2 + 4 * (1 - t);
        ctx.fill();
        ctx.stroke();
    },60);
},

.my-div-icon{
    background: rgba(0, 120, 168, 0);
}

 

//效果示例