IT虾米网

创建 mapbox 本地 sprite详解

sanshao 2021年08月26日 程序员 194 0
本文章主要介绍了创建 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.jsonhttp://localhost:8080/sprite.png
至此,本地sprite创建完毕。
另外,还可以上传 svg 文件到 mapbox studio,然后再下载 sprite.jsonsprite.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> 

发布评论
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

kill某个用户所有进程详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。