如何仅修改Leaflet图层图标的单个属性？

问题根源 #

你之前修改icoFile变量后，已创建的CircleIcon实例并不会自动更新iconUrl——因为这些实例在初始化时就已经把当时的icoFile值固化到自身的options里了，后续修改变量无法影响已存在的实例。另外你尝试的layer.setIcon().iconSize写法错误，setIcon()方法没有返回图标对象，反而会先清空图标，自然无法获取参数。

正确实现方案 #

在点击事件的eachLayer循环中，获取当前marker的原有图标配置，基于这些配置创建新的CircleIcon实例，仅替换iconUrl，再用setIcon()设置即可。

修改后的点击事件代码如下：

const btn_apply = document.querySelector('#apply');
btn_apply.addEventListener('click', function(e)
{
    const checked_red_ico = document.querySelector('#checkbox_red_ico').checked;
    const icoFile = checked_red_ico ? 'red-circle.svg' : 'blue-circle.svg';
    console.log(icoFile);
    markers.eachLayer(function (layer)
    {
        // 获取当前图标的所有配置参数
        const currentIconOpts = layer.options.icon.options;
        // 创建新图标，复用原有参数，仅替换iconUrl
        const newIcon = new CircleIcon({
            iconSize: currentIconOpts.iconSize,
            iconAnchor: currentIconOpts.iconAnchor,
            popupAnchor: currentIconOpts.popupAnchor,
            iconUrl: icoFile
        });
        // 设置新图标
        layer.setIcon(newIcon);
    });
});

简化写法（ES6扩展运算符） #

如果你的环境支持ES6，可以用扩展运算符简化代码：

markers.eachLayer(function (layer)
{
    const newIcon = new CircleIcon({
        ...layer.options.icon.options,
        iconUrl: icoFile
    });
    layer.setIcon(newIcon);
});

额外优化提示 #

创建marker时，第三个参数{alt: 'a_alt'}不会生效，因为L.marker的第二个参数是统一的配置对象，应该合并进去：

a_marker = L.marker([52, 17], {
    icon: ico_17,
    alt: 'a_alt'
}).bindPopup("a_desc").addTo(markers);

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