传单循环删除过去并保留最近的迭代

Question

美好的一天！

我正在尝试根据传单 L.cicle 设置脉动半径的动画，并设法限制了半径大小。

但是，我遇到了一个问题，多次迭代的半径没有从地图中删除，导致出现大量圆圈。

我将不胜感激有关如何删除圈子的先前迭代并保留生成的最新圈子的建议。

<!DOCTYPE html>
<html>
<head>
    
    <title>Map</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #map {
            width: 600px;
            height: 400px;
        }
    </style>

    <style>body { padding: 0; margin: 0; } #map { height: 100%; width: 100vw; }</style>
</head>
<body>
<div></div>
<div id='map'></div>

<script>
    var map = L.map('map').setView([1.3400776203517657, 103.88408580637439],6);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=ACCESS_TOKEN', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
        
    }).addTo(map);

    function radiuspulse() {
        const secs = 0.1 * 60;
        let radiuschange = 0;
        setInterval(function() {
            if (radiuschange < 50000) {
                radiuschange += 500;
                const circle = L.circle([1.3400776203517657, 103.88408580637439], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.1,
                weight:0,
                id: 'abc123',
                radius: radiuschange
                }).addTo(map);
                function clearcontent() {
                    document.getElementsByTagName("g").innerHTML = "";
                };
            }
            else {
                // clearInterval();
                let radiuschange = 0;
                radiuspulse();
            }
        }, secs);
        
    }

    radiuspulse()
</script>
</body>
</html>

Answer 1

不要总是创建一个新的圆，只改变半径 setRadius():

您也可以使用 circle.removeFrom(map)

删除圆圈

var circle = L.circle([1.3400776203517657, 103.88408580637439], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.1,
        weight:0,
        id: 'abc123',
        radius: 500
      }).addTo(map);

      var interval = null;
      function radiuspulse() {
        const secs = 0.1 * 60;
        let radiuschange = circle.getRadius();
        interval = setInterval(function() {
          if (radiuschange < 50000) {
            radiuschange += 500;
            circle.setRadius(radiuschange);
          }
          else {
            clearInterval(interval);
            circle.setRadius(0);
            radiuspulse();
          }
        }, secs);
      }

      function clearcontent() {
        circle.removeFrom(map);
      }

传单循环删除过去并保留最近的迭代

Leaflet circle loop remove past and retain recent iterations

javascript

dom

leaflet