前言

平时我们会经常遇到需要加载自定义图标的需求，如果是只需要加载一两个自定义图标，我们用addImage方法加载会比较简单。可是当我们需要加载十几种的自定义图标的时候，这种方法显然有点笨重，所以我们可以使用雪碧图，利用minemap支持加载多张雪碧图的特性，一次性预加载全部自定义图标。

雪碧图加载优点

• 相较于一张一张图片addImage,雪碧图加载可以明显减少http请求
• 由于地图引擎对于雪碧图的处理是预加载，所以图标显示效率也会更高
• 代码编写上可以减少许多重复代码

雪碧图制作

制作工具

在这里分享一个免费的雪碧图制作网站，我们只需要把多个图片文件上传，该工具就可以合并成一张雪碧图，并提供相关的css代码。

制作步骤

1. 上传图标
2. 制作地图引擎加载雪碧图所需的json，这里我们可以参考工具上的css代码，得到各个图标的xy偏移值

// sprite.json文件
{
  "toilet_1": {
    "x": 0,
    "y": 0,
    "width": 64,
    "height": 64,
    "pixelRatio": 2,
    "sdf": false
  },
  "toilet_2": {
    "x": 64,
    "y": 0,
    "width": 64,
    "height": 64,
    "pixelRatio": 2,
    "sdf": false
  },
}

Minemap地图加载自定义雪碧图

这里可以参考加载多张雪碧图并显示对应图标