雪碧图

sprite

如果图层样式中有使用 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：

添加/创建雪碧图

通常我们会使用一些自己的图标，下面介绍几种使用自定义图标的方法：

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)
  })
})

示例：Generate and add a missing icon to the map

Mapbox Studio

最直接的方法就是在 Mapbox Studio 中上传、管理图标。然后在样式预览中，将 sprite.png、sprite@2x.png、sprite.json 和 sprite@2x.json 文件下载下来使用。

提示

  1. 只支持svg格式，可以在 iconfont 下载图标上传
  2. 官方推荐的地图图标集：MAKI ICONS

spritezero

也可以使用 spritezero 工具生成雪碧图文件。

  1. 安装
npm install @mapbox/spritezero

在 Ubuntu 安装成功，Windows 安装失败

  1. 使用
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)
    })
  })
})

提示

  1. 注意node版本v10及以上
  2. 如果需要将png转换为雪碧图，需要修改 spritezero 源码，将mapnik.Image.fromSVGBytes修改为mapnik.Image.fromBytes即可
  3. 该库提供了命令行工具：spritezero-cli，可直接从文件夹生成雪碧图
  4. SDF icons：