创建 mapbox 本地 sprite

部署 mapbox 本地服务器，sprite也需要本地化，项目里面也需要定制化，下面简单介绍如何创建本地sprite

在样式文件里面，会有这么一句：

{..."version":8,"sprite": "mapbox://sprites/mapbox/streets-v11"...
}

再看以下自定义定义的一个图层

export const iconLayer = fromJS({id: 'acc-icon-layer',type: 'symbol',source: 'acc-data',interactive: true,layout: {'icon-allow-overlap': true,'icon-image': ['match',['get', 'accType'],'1', 'death-icon','2', 'injury-icon','3', 'loss-icon','day-0', 'situ-icon','day-1', 'esc-icon','day-2', 'death-icon',/* other */ 'loss-icon',],'icon-size': 0.2,},
});

其中，'icon-image'，读取的便是 sprite，或者 map.loadImage map.addImage 增加的图片，如官网例子 Add an icon to the map

map.on('load', function() {map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', function(error, image) {if (error) throw error;map.addImage('cat', image);map.addLayer({"id": "points","type": "symbol","source": {"type": "geojson","data": {"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "Point","coordinates": [0, 0]}}]}},"layout": {"icon-image": "cat","icon-size": 0.25}});});
});

到此为止，应该知道sprite的用处了，那么言归正传，如何创建sprite。
sprite 包含了2个文件：sprite.json sprite.png
有一种快捷方法，采用 spritezero 来创建。而其cli工具，即 spritezero-cli 工具，更为方便。

$ npm install -g @mapbox/spritezero-cli
$ spritezero --help

在win10能安装成功，在Ubuntu16安装不成功，暂且不知原因
全局安装 spritezero-cli 之后，执行

$ spritezero [output filename] [input directory]

例如

$ spritezero sprite icons

icons 是放svg的文件夹
sprite 是生成的文件名

执行之后，会自动生成了2个文件： sprite.json sprite.png
双击sprite.png 可以看到结果。
将 sprite.json sprite.png 这两个文件放到目标目录下，然后style文件里面的 sprite 指向该地址即可

例如

{..."version":8,"sprite": "http://localhost:8080/sprite"...
}

sprite 指向了http://localhost:8080/sprite，就会自动去加载 http://localhost:8080/sprite.json 和 http://localhost:8080/sprite.png。
至此，本地sprite创建完毕。
另外，还可以上传 svg 文件到 mapbox studio，然后再下载 sprite.json 和 sprite.png。
目前，只针对 svg 文件生成了 sprite，至于如何将 png 文件生成 sprite，待研究了。

踩坑，svg文件，不支持 defs（用于定义style，类似css），可将defs 里面的class样式，写到对应的要素里面，否则图标就是黑乎乎

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 128"><defs><style>.cls-1{fill:#ff712b;}.cls-2{fill:#fff;}</style></defs><path class="cls-1" d="M112,48c0,31.2-48,80-48,80S16,79.2,16,48,37.6,0,64,0,112,16.8,112,48Z" transform="translate(-16 0)"/><path class="cls-2" d="M85,49.88a21,21,0,0,0-41.95,0V76.19H85V49.88Zm-21-27a27,27,0,0,1,27,27h0V82.23H37V49.88a27,27,0,0,1,27-27Z" transform="translate(-16 0)"/>
</svg>

改成：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 128"><path fill="#ff712b" d="M112,48c0,31.2-48,80-48,80S16,79.2,16,48,37.6,0,64,0,112,16.8,112,48Z" transform="translate(-16 0)"/><path fill="#fff" d="M85,49.88a21,21,0,0,0-41.95,0V76.19H85V49.88Zm-21-27a27,27,0,0,1,27,27h0V82.23H37V49.88a27,27,0,0,1,27-27Z" transform="translate(-16 0)"/>
</svg>

创建 mapbox 本地 sprite相关推荐

linux 离线地图开发包,Mapbox本地离线部署
一离线部署说明从官网抄一个HelloWorld的例子,完整代码如下: Display a map body { margin:0; padding:0; } #map { position:abs ...
在计算机上创建一个本地用户账户,多种方法教你创建和删除Win10本地账户？
Win10系统如何创建和删除本地账户?现在使用Win10系统的朋友越来越多了,有位Windows10用户反映自己因为刚刚升级系统,所以对系统中的很多操作都很陌生.尤其是对Win10系统中添加和删除用户 ...
linux创建ftp本地用户名和密码,Vsftpd3.0--FTP服务器搭建之本地用户篇
FTP服务在工作中是经用到的一种工具,可以实现上传下载等功能.那么今天我们来聊一聊FTP服务器使用本地用户登录的实现模式. 既然是本地用户,就少不了要创建本地用户,下面我们创建2个用户: 第一步:创建 ...
git创建/删除本地branch(分支)，tag(标签)
#branch1.列出分支,-a参数是列出所有分支,包括远程分支 git branch [-a]2.创建一个本地分支 git branch branchname3.创建一个分支,并切换到该分支 git ...
使用git命令，将项目包创建到本地仓库并上传到码云仓库
使用git命令,将项目包创建到本地仓库并上传到码云仓库初衷一.生成/添加SHH公钥注意:""里面的内容是用于注册码云账号的邮箱地址二.创建仓库 1. 创建仓库 2. 将仓库 ...
Mapbox之sprite精灵图
一. sprite精灵图组成要素 1. 一张排满了小图标的.png图片 mapbox为android提供的样式有如下几种: // 街道图 public static final String MAPB ...
在计算机上创建一个本地用户账户,在工作组中，默认时每台Windows计算机的( )能够在本地计算机的SAM数据库中创建并管理本地用户账户。...
在工作组中,默认时每台Windows计算机的( )能够在本地计算机的SAM数据库中创建并管理本地用户账户. 更多相关问题 Working with the foreigners ____ me ___ ...
Centos7系统创建Docker本地仓库
在kubernetes技术体系中,镜像的仓库扮演着重要的角色.应用的更新与发布都是通过对镜像进行更新,并通过新的镜像启动容器实现的. 为方便之后的学习,本文将介绍在centos7上实现docker本地 ...
Gitee仓库创建及本地项目如何关联并上传
gitee是国版的github,网络要比后者快一些,自己平时也会更多的使用.新创建的gitee仓库,可能并不符合一个标准的项目结构,在其它文章中也有讲述如何拉去项目后再更新项目,提交到远程仓库.git ...

创建 mapbox 本地 sprite

创建 mapbox 本地 sprite相关推荐

最新文章

热门文章