如何高效导入数百张地图图标以减少HTTP请求？

针对你遇到的数百次图标请求问题，这几个方案可以有效减少请求数量：

1. 使用雪碧图（Sprite Sheet） #

把所有图标合并成一张单独的雪碧图，仅需一次HTTP请求就能获取所有图标资源，之后通过Canvas裁剪出单个图标添加到地图。

示例代码：

// 加载合并后的雪碧图
map.loadImage('sprite.png', (error, spriteImage) => {
  if (error) throw error;
  
  // 配置每个图标的名称、在雪碧图中的位置和尺寸
  const iconConfigs = [
    { name: 'marker-shop', x: 0, y: 0, w: 40, h: 40 },
    { name: 'marker-park', x: 40, y: 0, w: 40, h: 40 },
    // 依次添加所有图标配置
  ];
  
  iconConfigs.forEach(config => {
    const canvas = document.createElement('canvas');
    canvas.width = config.w;
    canvas.height = config.h;
    const ctx = canvas.getContext('2d');
    
    // 从雪碧图中裁剪出当前图标
    ctx.drawImage(
      spriteImage,
      config.x, config.y, config.w, config.h,
      0, 0, config.w, config.h
    );
    
    // 转成ImageBitmap并添加到地图
    createImageBitmap(canvas).then(bitmap => {
      map.addImage(config.name, bitmap);
    });
  });
});

2. 打包所有图标为单个JSON资源 #

将所有图标转成Base64编码，打包到一个JSON文件中，一次请求获取全部数据后逐个解析添加。

示例代码：

// 请求包含所有图标Base64的JSON文件
fetch('all-icons.json')
  .then(res => res.json())
  .then(iconData => {
    Object.entries(iconData).forEach(([iconName, base64Str]) => {
      const img = new Image();
      img.onload = () => {
        createImageBitmap(img).then(bitmap => {
          map.addImage(iconName, bitmap);
        });
      };
      img.src = base64Str;
    });
  });

注：Base64会让文件体积增加约30%，适合图标总尺寸不大的场景。

3. 利用HTTP/2多路复用（补充方案） #

如果你的服务器支持HTTP/2，即使保留数百个图标请求，也能通过同一个TCP连接并行传输，避免多次TCP握手的开销。不过这只是优化传输效率，并没有减少请求数量，适合无法修改资源打包方式的场景。

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