mapbox加载多个雪碧图

贴个群号

WebGIS学习交流群461555818，欢迎大家

源码

mapbox中style的雪碧图地址是固定的，所以我们想加载多个雪碧图的时候，就是把雪碧图里面的图片循环用addImage加上去，效果是一样的。都能在icon-image等属性中使用

// 加载雪碧图
const loadSprite = (map, tilesUrlDC = './static/sprite')=>{
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  const img = new Image()

  img.src = `${tilesUrlDC}/sprite.png`
  img.setAttribute('crossOrigin', '')
  img.onload = async () => {
    canvas.width = img.width
    canvas.height = img.height
    ctx.drawImage(img, 0, 0)
    const spriteJson = await fetch(`${tilesUrlDC}/sprite.json`).then((res) => res.json())

    for (const k in spriteJson) {
      const { width, height, x, y } = spriteJson[k]
      const data = ctx.getImageData(x, y, width, height).data

      if (!map.hasImage(k)) {
        map.addImage(k, { width, height, data })
      }
    }
  }
}