美文网首页
雪碧图制作-mapbox本地化

雪碧图制作-mapbox本地化

作者: 天堂潇潇 | 来源:发表于2018-06-15 11:34 被阅读0次

雪碧图制作-mapbox本地化

1. 雪碧图制作

插件:spritezero-cli

1.1. 安装

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

1.1.1. nodejs安装

sudo apt-get install nodejs
sudo apt-get install npm

1.1.2. spritezero-cli安装

#下载
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. 使用

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
//一级样式
spritezero ttt input/
//retina样式
spritezero --retina ttt@2x input/

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

相关文章

  • 雪碧图制作-mapbox本地化

    雪碧图制作-mapbox本地化 1. 雪碧图制作1.1. 安装1.1.1. nodejs安装1.1.2. spri...

  • Mapbox支持多雪碧图加载

    Mapbox官网提供的样式支持一种雪碧图加载,但是在实际应用中可能存在加载多个雪碧图的情况,这种情况该如何处理? ...

  • 前端—雪碧图

    使用雪碧图的优点有以下几点: 雪碧图的制作与使用方法:

  • css-雪碧图

    雪碧图 雪碧图是图片拼接技术,主要用来减少http请求。 制作 ps 自己制作 使用工具,在windows有CSS...

  • 雪碧图制作

    首先需要一张图片 HTML代码如下: css代码如下: 显示效果如下: 当鼠标移入时,图片就会相应的发生变化

  • 本地文字切片-mapbox本地化

    本地文字切片-mapbox本地化 1. 本地文字切片 2. 安装 3. 使用 1. 本地文字切片 mapbox/n...

  • 合格前端系列(二):前端优化问题

    减少http请求 制作雪碧图 减少代码大小 待更。。。

  • 前端 利用steps设置不连续动画

    1.准备 制作横向的雪碧图,例如11张小图拼成一张雪碧图 2.设置动画,背景位置变化 @keyframes gif...

  • Python使用png图片生成MapboxGL雪碧图

    在mapboxgl中,使用sprite雪碧图实现图标渲染是比较常见的方式。对于自己制作定义的图标如何生成雪碧图,本...

  • MapBox GL本地化开发

    最近项目中需要使用MapBox GL进行地图渲染,用户需求是在局域网中运行,所以需要将MapBox GL进行本地化...

网友评论

      本文标题:雪碧图制作-mapbox本地化

      本文链接:https://www.haomeiwen.com/subject/puipeftx.html