Angular Leaflet自定义选中图标重复加载问题求助

问题概述 #

使用Leaflet v1.9.2搭配@asymmetrik/ngx-leaflet v14.0.1开发地图应用，存在以下问题：

• 地图包含200-400个动态车辆标记，每15秒更新一次
• 用户点击标记切换为3种选中状态图标之一，首次点击加载正常，短时间内重复点击可利用缓存
• 但间隔约10秒后再次点击同一标记，对应图标会从网络重新加载，导致延迟甚至短暂空白，低速环境下问题更明显
• 已尝试通过创建临时Marker并移除的方式预加载图标，但预热后仍出现重复加载现象

已尝试的预热代码：

private warmMarkerAssets(): void {
  const selectedMarkerIcons = ["bus/selected_bus.png", "train/selected_train.png", "trolleybus/selected_trolleybus.png"]
  selectedMarkerIcons.forEach((iconPath) => {
    const tempMarker = marker(
      latLng(0, 0),
      { icon: icon({
        iconUrl: this.assetMarkerPath + iconPath,
        iconSize: [40, 40],
        iconAnchor: [20, 20],
      })}
    )
    this.map.addLayer(tempMarker)
    this.map.removeLayer(tempMarker)
  })
}

解决建议 #

1. 全局缓存Icon实例，避免重复创建 #

Leaflet每次创建L.Icon实例时，即使URL相同，若关联的DOM元素被销毁，可能触发新的图片请求。提前创建并复用Icon实例：

// 组件或服务中初始化并缓存Icon实例
private selectedIconCache: Record<string, Icon> = {};

ngOnInit(): void {
  this.initSelectedIcons();
  this.warmMarkerAssets(); // 配合预加载使用
}

private initSelectedIcons(): void {
  const baseIconOpts = {
    iconSize: [40, 40],
    iconAnchor: [20, 20]
  };

  this.selectedIconCache['bus'] = icon({
    ...baseIconOpts,
    iconUrl: `${this.assetMarkerPath}/bus/selected_bus.png`
  });
  this.selectedIconCache['train'] = icon({
    ...baseIconOpts,
    iconUrl: `${this.assetMarkerPath}/train/selected_train.png`
  });
  this.selectedIconCache['trolleybus'] = icon({
    ...baseIconOpts,
    iconUrl: `${this.assetMarkerPath}/trolleybus/selected_trolleybus.png`
  });
}

// 点击标记时直接复用缓存的Icon实例
handleMarkerClick(marker: Marker, vehicleType: string): void {
  marker.setIcon(this.selectedIconCache[vehicleType]);
}

2. 改用原生Image对象预加载图片 #

之前的临时Marker预加载方式，Leaflet移除Marker后会清理对应的图片DOM元素，可能导致浏览器缓存失效。改用原生Image对象直接将图片存入浏览器缓存：

private warmMarkerAssets(): void {
  const iconPaths = ["bus/selected_bus.png", "train/selected_train.png", "trolleybus/selected_trolleybus.png"];
  
  iconPaths.forEach(path => {
    const img = new Image();
    img.src = `${this.assetMarkerPath}/${path}`;
    // 可选：监听加载完成事件确认预热状态
    img.onload = () => console.log(`Preloaded icon: ${path}`);
  });
}

该方法无需依赖地图实例，可在组件初始化时直接调用，确保图片提前进入持久缓存。

3. 配置静态资源HTTP缓存策略 #

检查服务器返回的图片响应头，确保设置了合理的缓存规则，让浏览器长期缓存这些静态图标：

• 推荐设置Cache-Control: public, max-age=31536000（缓存1年），若需更新资源可配合文件哈希命名（如selected_bus.v2.png）
• 避免服务器返回no-cache或短过期时间的缓存策略，防止浏览器频繁重新请求

4. 复用标记实例，减少DOM销毁重建 #

每15秒更新标记时，避免销毁旧标记并创建新标记，采用标记池复用策略：

• 维护一个以车辆ID为键的标记映射表
• 更新时匹配已有标记，仅更新位置、图标等属性，而非销毁重建
• 这样选中状态的Icon实例会持续关联在标记上，不会因标记重建触发图片重新加载

内容的提问来源于stack exchange，提问作者Petr Jelínek