javascript - 由于屏幕上的图标数量，传单放大/缩小速度很慢

Question

我正在使用以下jsfiddle.net简化我的挑战

我在随机位置添加了 3000 个仓鼠图标，一旦该过程完成，就很难放大/缩小。

问题，如果我不能将图标聚集成组，我应该如何解决这个问题（addImages）。有没有更好的方法（我尝试使用 svg 而不是 png，同样的问题）

class Simulation
{
    constructor()
    {
          // center of the map
    var center = [1.8650,  51.2094];

    // Create the map
    var map = L.map('map').setView(center, 2);

    // Set up the OSM layer
    L.tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18
      }).addTo(map);

    
    this.imagesLayer = new L.layerGroup(); 
    this.imagesLayer.addTo(map);
}

addImages()
{
        console.log('ok, add')
    
            for (var i=0; i<3000; i++)
    { 
       var flagIcon = L.icon({
            iconUrl: 'https://cdn-icons-png.flaticon.com/512/196/196817.png',
            iconSize:     [15, 15], // size of the icon
            shadowSize:   [18, 18], // size of the shadow
            iconAnchor:   [18, 18], // point of the icon which will correspond to marker's location
            shadowAnchor: [4, 62],  // the same for the shadow
            popupAnchor:  [-1, -1] // point from which the popup should open relative to the iconAnchor
        });
             
    
    var randLat = Math.floor(Math.random() * 90);
    randLat *=  Math.round(Math.random()) ? 1 : -1;
    
    var randLon = Math.floor(Math.random() * 180);
    randLon *=  Math.round(Math.random()) ? 1 : -1;
             
    var flag = L.marker([randLat,randLon], {icon: flagIcon})
    this.imagesLayer.addLayer(flag)   
    
    }                        
}

removeImaegs()
{
        console.log('ok removed')
    this.imagesLayer.clearLayers();
}   
}

var simulation = new Simulation();

标签： javascriptoptimizationleaflet