How to use L.canvas to draw a fluctuating circle

I am a back-end programmer who is using leaflet for the first time. I don’t know much about js animation steps. I want to use L.canvas to draw a dynamic circle, just like the picture below.

Specify the range of the circle or the latitude and longitude of the center of the circle, and the radius will continue to fluctuate and spread outward, similar to water waves (this effect in the picture is made by me using a highly encapsulated animation library)

I hope someone can provide me with an example, or give me a suggestion so that I can smoothly draw a dynamic circle o开发者_如何学Cn the map. thanks a lot

---

You can create mutliple circles and update the radius each millisecond:

var canvasRenderer = L.canvas();

function createWavingCircle(latlng, color, fromRadius, toRadius){
    var circle = L.circle(latlng, {radius: fromRadius, color, renderer: canvasRenderer}).addTo(map);
    var nextCircle;
    var interval = setInterval(()=>{
        var radius = circle.getRadius()+1;
        if(radius <= toRadius){
            circle.setRadius(radius);
            if(Math.round((radius / toRadius) * 100) >= 30 && !nextCircle){
                nextCircle = createWavingCircle(latlng, color, fromRadius, toRadius);
            }
        } else {
            if(nextCircle && nextCircle.getRadius() >= toRadius){
                circle.remove();
                clearInterval(interval);
            }
        }
    },1)
    return circle;
}

// replace this values with your custom ones
createWavingCircle(map.getCenter(), 'red', 10, 400);

https://plnkr.co/edit/IT5VcxokeCWpkpEx

---

Create a new L.canvas object and specify the desired options, and use the addTo() method to add the circle to your map.

This will create a circle that is initially drawn with a radius of 10, and will have its radius redrawn with a new random value every second. The circle will continue to fluctuate in size until the setInterval() loop is stopped.

import { L } from 'leaflet';

const circle = L.canvas({
  center: [51.505, -0.09],
  radius: 10,
  color: 'red',
});

circle.addTo(map);

setInterval(() => {
  const newRadius = Math.random() * 50;
  circle.setRadius(newRadius);
}, 1000);

Hope it works!

---

      // build CircleMarker
  createFloatCircle(latLng, color, fromRadius, toRadius){
    var _this = this;
    var circle = L.circleMarker(latLng, 
    {radius: fromRadius, 
      color: color,
      renderer: L.canvas({ padding: 0.5 }),
      fillColor: color,
      fillOpacity: 0.5,
      stroke: false,
    });
    circle.addTo(_this.offMap);
    setInterval(() => {
      var newRadius = circle.getRadius() + 1;
      if(newRadius <= toRadius){
        circle.setRadius(newRadius);
      } else {
        circle.setRadius(fromRadius);
      }
      circle.setStyle({fillColor: _this.getColor(newRadius, fromRadius, toRadius)});
    }, 20);
  },
  getColor(radius, fromRadius, toRadius){
    var _this = this;
    var color = 'red';
    var percent = (radius - fromRadius) / (toRadius - fromRadius);
    var red = Math.round(255 * percent);
    var green = Math.round(255 * (1 - percent));
    color = 'rgb(' + red + ',' + green + ',0)';
    return color;
  },

This is my implementation, as the circle expands, the color of the layer gradually deepens