创建 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

猜你喜欢