雪碧图制作 - mapbox 本地化

发表于 更新于 分类于

雪碧图制作

插件：spritezero-cli

安装

安装前最好先进行矢量地图 tippecanoe 扩展的安装

nodejs 安装

1
2
3
# nodejs 版本高于8无法使用
$ sudo apt-get install nodejs
$ sudo apt-get install npm

spritezero-cli 安装

1
2
3
4
5
6
7
8
9
10
11
#下载
$ wget https://github.com/mapbox/spritezero-cli/archive/v2.1.0.tar.gz
#解压
$ tar -xzf v2.1.0.tar.gz
#一定要使用全局代理运行
#一定要使用全局代理运行
#一定要使用全局代理运行
$ cd spritezero-cli-2.1.0/
$ apt-get install nodejs-legacy
$ npm install
$ npm install -g @mapbox/spritezero-cli

使用

1
2
3
4
5
$ spritezero [output filename] [input directory]

# --retina      shorthand for --ratio=2
# --ratio=[n]   pixel ratio
# --unique      map identical images to multiple names

将整个目录的 SVG 文件转为一张 PNG 雪碧图和一份 JSON 样式表

  • example
1
2
3
4
# 一级样式
$ spritezero ttt input/
# retina样式
$ spritezero --retina ttt@2x input/

将整个 input 目录中的所有 svg 文件转换为 ttt.png 的雪碧图和 ttt.json 的样式表