【GIS】maplibre之制图（一）--使用spritezero镜像制作精灵图

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制图的时候直接引用地址即可。

4、注意事项

1、需要生成精灵图的文件夹中只能包含svg图片。
2、不是全部svg图片都能转成精灵图，有官方说明，我没存地址
3、官方已经将支持svg列为下一阶段的计划，并悬赏5000USD，想直接使用svg制图的，可以关注一下官方的更新推送
4、找到一个maplibre支持svg的插件，功能有限，只能在地图加载时利用浏览器特性，将svg加载出来。有点脱了裤子放屁的感觉，不建议使用。除非极其特殊的业务场景。插件的官方地址：https://github.com/rbrundritt/maplibre-gl-svg/tree/main