关于gis:如何创建-mapbox-精灵图

缘起

后面文章介绍了如何在本地公布 OSM 数据，并应用 maputnik 自定义 mapbox 格局的地图款式。在应用 maputnik 配图时，如果想要应用本人的图片作为地图符号，就须要制作精灵图。

精灵图的制作工具有很多，在线网站就有一大堆，但普遍存在一个问题，maputnik 对精灵图的要求是要有精灵图和阐明精灵图中图片信息的 json 配置文件，而这些在线网站的工具，只能生成精灵图，没有 json 配置文件。

mapbox 精灵图工具

mapbox 开源了一个精灵图制作工具 spritezero，这个工具能够生成精灵图和对应的 json 文件。spritezero 的输出文件是 svg 文件，输入文件是指定比例的精灵图和对应的 json 文件。

我本人在装置 spritezero 这个工具时总报错，翻看它的 issues 发现很多人都碰到了这个问题。起因是用到的一个类库太老了，我最终解决办法是另辟蹊径，找了一个它的 docker 库 spritezero-docker，这个 docker 库里曾经把 spritezero 的环境配置好了，间接用就行。

spritezero-docker 应用办法

上面的操作步骤是基于 linux 零碎

1. 克隆库

   docker pull dolomate/spritezero

2. 在当前目录创立 ./data/sprites/_svg 文件夹
3. 把 svg 文件放在 ./data/sprites/_svg 文件夹中，svg 文件的名称不要太随便，名称会被写入 json 配置文件，后续应用时会用到。
   

4. 在当前目录执行命令，生成精灵图：

   docker run -it -e FOLDER=_svg -e THEME=sprites -v ${PWD}/data:/data dolomate/spritezero

5. 生成的精灵图会寄存在 ./data/sprites 文件夹中

精灵图黑框问题

查看生成的精灵图，你可能会碰上下图中的问题：只有彩色轮廓

一通排查，发现下面问题的起因是：在 svg 代码中，style 的写法问题。style 独自写不行，须要内嵌到 dom 元素中，如下图：

解决办法，用 AI（Adobe Illustrator）软件导出 SVG 文件时，CSS 属性栏抉择“款式属性”，style 就会内嵌到 dom 元素中了。下图是导出时的正确选项，更深刻的能够参考这篇文章

在 maputnik 中应用生成的精灵图

1. 把生成的精灵图用 web 服务器公布进去，我用的 tomcat。记得解决 web 服务器的跨域问题，不然调用时会报错。
2. 配置精灵图公布的门路，如下图

3. 抉择一个 symbol 类型的符号，在 Image 选项的下拉框中，会间接显示精灵图中的图片名称，这个图片名称就是后面让大家起名不要太随便的 SVG 文件名称。

总结：

1. 在用 maputnik 配图时，如果想自定义地图符号，就要本人制作精灵图
2. 网上的精灵图制作工具，广泛只能生成精灵图，没有 json 配置文件，而 maputnik 须要 json 配置文件
3. mapbox 开源了一个精灵图制作工具 spritezero，生成的精灵图有 json 配置文件
4. spritezero 在装置时会报错，起因是用到的一个库太老了
5. spritezero-docker 是 spritezero 的 docker 库，曾经解决了装置环境问题
6. 介绍了如何应用 spritezero-docker 生成精灵图
7. 生成精灵图时，如果呈现黑框问题，多半是因为 style 的写法问题。style 须要内嵌到 dom 元素中
8. 介绍了如何在 maputnik 中应用生成的精灵图

相干连贯：

1. 如何在本地公布 OSM 数据：http://gisarmory.xyz/blog/index.html?blog=OSMVectorTiles
2. spritezero 库 github 地址：https://github.com/mapbox/spritezero
3. spritezero 库装置报错的问题：https://github.com/mapbox/spritezero/issues/84
4. spritezero-docker 库 github 地址：https://github.com/macteo/spritezero-docker
5. 如何正确用 AI 导出 SVG 文件：https://cloud.tencent.com/developer/article/1007666

原文地址：http://gisarmory.xyz/blog/index.html?blog=maputnikSprites

关注《GIS 兵器库》公众号，第一工夫取得更多高质量 GIS 文章。

本文章采纳 常识共享署名 - 非商业性应用 - 雷同形式共享 4.0 国内许可协定 进行许可。欢送转载、应用、从新公布，但务必保留文章署名《GIS 兵器库》（蕴含链接：http://gisarmory.xyz/blog/），不得用于商业目标，基于本文批改后的作品务必以雷同的许可公布。