Leaflet加载大量图标缩放卡顿，不可聚合场景下的优化方案求助

核心卡顿原因 #

你的代码存在3个明显的性能瓶颈：

1. 循环内重复创建完全相同的Icon实例，产生3000份冗余的图标配置内存开销
2. 默认用DOM模式渲染Marker，3000个独立DOM节点在地图缩放时会触发大量重排重绘
3. 循环内单次调用addLayer，每添加一个Marker就触发一次图层更新，重复渲染次数过多

具体优化措施 #

• 全局复用同一个Icon实例，不要在循环内重复创建
• 初始化地图时开启preferCanvas: true配置，所有Marker会被渲染到单个Canvas画布上，完全避免生成数千个DOM节点，缩放操作的流畅度会提升数倍
• 先把所有生成的Marker存入临时数组，一次性批量添加到图层组，减少图层更新次数
• 移除不需要的阴影配置，降低每个Marker的渲染计算量
• 修正错误的Icon锚点参数，避免不必要的位置计算偏差

优化后代码 #

class Simulation
{
    constructor()
    {
        // 地图中心点
        const center = [1.8650,  51.2094];
        // 开启Canvas渲染模式，核心优化点
        const map = L.map('map', {
            preferCanvas: true
        }).setView(center, 2);
        // 加载OSM底图
        L.tileLayer(
          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18
          }).addTo(map);
        this.imagesLayer = new L.layerGroup(); 
        this.imagesLayer.addTo(map);
        // 提前全局创建唯一的Icon实例，全局复用
        this.flagIcon = L.icon({
            iconUrl: 'https://cdn-icons-png.flaticon.com/512/196/196817.png',
            iconSize:     [15, 15],
            // 不需要阴影可直接移除相关配置，需要的话可以自行保留
            iconAnchor:   [7, 7], // 15x15的图标锚点设置为中心即可，和原需求对齐可自行调整
            popupAnchor:  [-1, -1]
        });
    }
    addImages()
    {
        console.log('ok, add')
        const markers = []
        for (let i=0; i<3000; i++)
        { 
            let randLat = Math.floor(Math.random() * 90);
            randLat *=  Math.round(Math.random()) ? 1 : -1;
            let randLon = Math.floor(Math.random() * 180);
            randLon *=  Math.round(Math.random()) ? 1 : -1;      
            const flag = L.marker([randLat,randLon], {icon: this.flagIcon})
            markers.push(flag)
        }
        // 批量添加所有Marker，只触发一次图层更新
        this.imagesLayer.addLayer(markers)                     
    }
    removeImages()
    {
        console.log('ok removed')
        this.imagesLayer.clearLayers();
    }   
}
const simulation = new Simulation();

额外优化建议 #

如果后续Marker数量还会进一步上涨，可以增加视口裁剪逻辑，只渲染当前地图可视范围内的Marker，移出可视区的Marker暂时移除，进一步降低渲染压力。

内容的提问来源于stack exchange，提问作者ProcolHarum