Mapbox GL JS CookbookMapbox GL JS Cookbook
快速开始
样式规范
空间数据
插件
进阶
DECK.GL
  • 文档
  • 术语
  • 示例
GitHub
快速开始
样式规范
空间数据
插件
进阶
DECK.GL
  • 文档
  • 术语
  • 示例
GitHub
  • 样式规范

    • 样式规范
    • 雪碧图
    • 字体
    • 数据源

      • 数据源
      • 瓦片数据源
      • GeoJSON
      • 图片 & 视频
      • 自定义数据源
    • 图层
    • 表达式
    • 灯光
    • 地形

雪碧图

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:

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

示例: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:
    • 在 generateLayout 给 dataLayout 添加属性: sdf: true
    • Option to generate SDF sprites、@elastic/spritezero
    • Demo of SDF sprites :::
在 GitHub 上编辑此页!
上次更新:
贡献者: huanglii, huangli, 黄俐
Prev
样式规范
Next
字体