雪碧图
如果图层样式中有使用 background-pattern
、fill-pattern
、line-pattern
、fill-extrusion-pattern
、或 icon-image
属性,则必须设置该属性。例如:
// Style property
'sprite': 'https://naivemap.com/mapbox/sprite'
// Layout property of SymbolLayer
'icon-image': 'cat'
雪碧图文件
一个有效的雪碧图必须包含两种文件:索引和图片。在加载时,会自动生成完整的 URLs:
- https://naivemap.com/mapbox/sprite.json 和 http://naivemap.com/mapbox/sprite.png 或
- https://naivemap.com/mapbox/sprite@2x.json 和 https://naivemap.com/mapbox/sprite@2x.png(高 DPI 设备)
添加/创建雪碧图
通常我们会使用一些自己的图标,下面介绍几种使用自定义图标的方法:
Mapbox GL JS API
addImage
通过 map.addImage() 方法向样式中添加图标。
map.loadImage('./images/cat.png', (error, image) => {
if (error) throw error
if (!map.hasImage('cat')) map.addImage('cat', image)
})
此外,当样式所需的图标丢失时将会触发 styleimagemissing 事件,通过该事件可添加指定 id
图标。
map.on('styleimagemissing', (e) => {
const id = e.id // 丢失图片 id
map.loadImage(url, (error, image) => {
if (error) throw error
map.addImage(id, image)
})
})
Mapbox Studio
最直接的方法就是在 Mapbox Studio 中上传、管理图标。然后在样式预览中,将 sprite.png
、sprite@2x.png
、sprite.json
和 sprite@2x.json
文件下载下来使用。
提示
- 只支持
svg
格式,可以在 iconfont 下载图标上传 - 官方推荐的地图图标集:MAKI ICONS
spritezero
也可以使用 spritezero 工具生成雪碧图文件。
- 安装
npm install @mapbox/spritezero
在
Ubuntu
安装成功,Windows
安装失败
- 使用
var spritezero = require('@mapbox/spritezero')
var fs = require('fs')
var glob = require('glob')
var path = require('path')
;[1, 2].forEach(function (pxRatio) {
var svgs = glob.sync(path.resolve(path.join(__dirname, 'input/*.svg'))).map(function (f) {
return {
svg: fs.readFileSync(f),
id: path.basename(f).replace('.svg', ''),
}
})
var pngPath = path.resolve(path.join(__dirname, 'output/sprite@' + pxRatio + '.png'))
var jsonPath = path.resolve(path.join(__dirname, 'output/sprite@' + pxRatio + '.json'))
// Pass `true` in the layout parameter to generate a data layout
// suitable for exporting to a JSON sprite manifest file.
spritezero.generateLayout({ imgs: svgs, pixelRatio: pxRatio, format: true }, function (err, dataLayout) {
if (err) return
fs.writeFileSync(jsonPath, JSON.stringify(dataLayout))
})
// Pass `false` in the layout parameter to generate an image layout
// suitable for exporting to a PNG sprite image file.
spritezero.generateLayout({ imgs: svgs, pixelRatio: pxRatio, format: false }, function (err, imageLayout) {
spritezero.generateImage(imageLayout, function (err, image) {
if (err) return
fs.writeFileSync(pngPath, image)
})
})
})
提示
- 注意
node
版本v10
及以上 - 如果需要将
png
转换为雪碧图,需要修改 spritezero 源码,将mapnik.Image.fromSVGBytes
修改为mapnik.Image.fromBytes
即可 - 该库提供了命令行工具:spritezero-cli,可直接从文件夹生成雪碧图
- SDF icons:
- 在
generateLayout
给dataLayout
添加属性:sdf: true
- Option to generate SDF sprites、@elastic/spritezero
- Demo of SDF sprites :::
- 在