目录
1、背景介绍
1.1、什么是精灵图
mapbox的解释：https://docs.mapbox.com/help/glossary/sprite/
精灵是包含样式中包含的所有图标的单个图像。通过将大量小图像组合成单个图像（精灵），您可以减少获取所有图像所需的请求数，从而提高性能并使地图加载速度更快。
当您将SVG 图标上传到Mapbox Studio时，它将自动添加到样式的精灵中。同样，所有 Mapbox 模板样式都带有自己的精灵，其中填充了可与给定样式一起使用的图标。
精灵图是许多图标组合成一个图像：
每个精灵图都有一个对应的 JSON 文件。JSON文件对描述了精灵图中的每个图标，包括图标的大小和精灵内的位置：
"airport-15": {
"width": 42,
"height": 42,
"x": 76,
"y": 300,
"pixelRatio": 2,
"visible": true
}
1.2、怎么制作精灵图
公司决定使用maplibre技术路线实现当前的GIS产品和业务系统，maplibre对标的是mapbox。mapbox提供了制作精灵图的文档：https://docs.mapbox.com/style-spec/reference/sprite/
其中提到的工具是spritezero
OK，有了官方文档，直接按官方文档处理即可
2、前期准备
不熟悉前端的东西，而且在Windows10 和centos7上都无法安装
$ npm install @mapbox/spritezero
我的电脑，Win10安装失败
公司服务器centos7，直接卡住不执行了
没办法，在hub.docker.com上找了一些镜像，能用的是这个
docker pull openftth/spritezero-cli:latest
问题又来了：我自己服务器在新加坡，拉取无压力。但是公司服务器拉不来这个镜像，我服务器快到期了，又不准备续费。就干脆推到了公司的harbor。然后在217服务器上启个容器，齐活儿。
3、使用工具制作精灵图
3.1、拉取镜像
从公网或者公司harbor拉取镜像
#从公网拉取镜像
docker pull openftth/spritezero-cli:latest
#从公司harbor拉取镜像
docker pull xxx.sypesco.com:5443/scity/spritezero-cli:v0
3.2、创建文件夹
创建一个用于存放svg图片的文件夹，后面会把这个文件夹mount到spritezero容器
#创建文件夹用于存放svg图片
mkdir -p /root/spritezero/svgfile
3.3、准备svg图片
用ftp工具把需要转精灵图的svg图片上传到刚才创建的文件夹中
3.4、启动容器
命令说明：
–restart always 服务器重启时自动启动当前容器
–name spritezero 容器名称
-v /root/spritezero/svgfile:/data 把宿主机的目录/root/spritezero/svgfile 挂载（mount）到容器的目录/data
#使用该镜像启动容器
docker run -itd --restart always --name spritezero -e FOLDER=_svg -e THEME=sprites -v /root/spritezero/svgfile:/data xxx.sypesco.com:5443/scity/spritezero-cli:v0
3.5、进入容器生成精灵图
容器启动后使用命令进入容器。下面命令中的spritezero 是刚才启动的容器名称。
docker exec -it spritezero sh
进入svg的存放目录
cd /data
使用spritezero命令制作精灵图，命令格式：
spritezero 精灵图名称 需要转换的目录
–ratio 是原始svg大小的倍率
例如：
spritezero --ratio=2 test1 /data/testp1
把文件夹/data/testp1下的所有svg制作成为一张名称为test1的精灵图，精灵图中的每个svg大小是原始文件大小的2倍。
3.6、成果展示
将生成的json和图片上传到S3存储上备用。公司使用的是兼容S3标准的minio。使用maplibre制图的时候直接引用地址即可。
