Leaflet开发：如何移除marker上的pulse图标且不删除marker本身

问题描述 #

我的地图上有数千个marker，其中部分按照用户需求使用了pulsing icons脉冲图标。当前用户想要移除指定marker上的该图标，我添加图标的代码如下：

var icon = L.icon.pulse({html:iconOptions.html, fillColor: iconOptions.fillColor, color:iconOptions.color, iconSize:iconOptions.iconSize, animate: true});
marker.setIcon(icon);

我尝试使用如下代码移除图标，但未成功：

var icon = marker.getIcon(); //getIcon方法不存在 :( 
marker.remove(icon)

注意：我无法删除该marker，因为它存储了其他有价值的信息，且该图标不属于可调用clearLayer的图层。

解决方案 #

你之前的写法存在两个核心问题：

• Leaflet 的 marker.remove() 方法是用来将整个Marker从地图上移除的，无法单独移除图标
• 标准Leaflet Marker实例本身是支持getIcon()方法的，如果调用报错要么是Leaflet版本过旧，要么是你拿到的变量不是合法的Marker实例，实际上你根本不需要调用这个方法就能实现需求。

方案1：替换图标（最简单通用）

你不需要删除原有图标，直接给目标Marker设置普通图标覆盖掉脉冲图标即可，完全不会影响Marker上存储的其他数据：

// 如果用Leaflet默认图标，直接这么写
marker.setIcon(new L.Icon.Default());

// 如果你有项目自定义的普通非脉冲图标，替换成你自己的图标实例即可
const customNormalIcon = L.icon({
  iconUrl: '你的普通图标路径',
  iconSize: [30, 30],
  iconAnchor: [15, 15]
});
marker.setIcon(customNormalIcon);

后续如果需要重新启用脉冲效果，再次调用你之前的脉冲图标setIcon代码即可。

方案2：仅停掉脉冲动画，保留图标样式

如果不需要更换图标，只想去掉动效，可以直接操作Marker的DOM元素移除动画：

const markerElement = marker.getElement();
if (markerElement) {
  // 不同版本脉冲插件的类名可能有差异，可F12查看实际的脉冲元素类名调整
  const pulseElement = markerElement.querySelector('.leaflet-pulse-icon');
  if (pulseElement) {
    // 移除动画类
    pulseElement.classList.remove('pulse');
    // 或者直接禁用动画属性
    pulseElement.style.animation = 'none';
  }
}

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