前言

在上一篇实例博客中（MapboxGL绘制简易气泡图）我们绘制了一个简易的单色气泡图，现在需求升级了。我们需要为气泡加载不同的颜色。
而要实现这个效果，其实相当简单，直接利用Mapbox提供的SDF渲染方法。
官网教程参考：Using recolorable images in Mapbox maps

接下来，我们将在【WebGIS实例】（6）MapboxGL绘制简易气泡图这篇博客的基础上来实现我们想要的效果。

实现

首先，矢量要素的properties新增color属性，数据格式示例：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "num": 414,
        "color": "#808080"
      },
      "geometry": {
        "coordinates": [
          112.68784006428433,
          23.85455050268874
        ],
        "type": "Point"
      }
    }
  ]
}

第一步：为图像启用SDF

 // 加载图标
 map.loadImage(require('@/assets/circle.png'), function (error, image) {
   if (error) throw error
   map.addImage('bubbleIcon', image, { sdf: true })
 })

这里我们直接引入circle.png，它是一个单色的圆形。同时，我们要为图像启用sdf： { sdf: true }，启用的sdf的图像，在Symbol图层中就能够通过icon-color属性来重新渲染图像的颜色。

第二步：配置图像实际渲染的颜色

map.addLayer({
  id: 'bubbleLayer',
  type: 'symbol',
  source: 'bubbleSource',
  layout: {
    'icon-image': 'bubbleIcon', // 图标ID
    'icon-size': 0.2, // 图标的大小
    'icon-anchor': 'center', // 图标的位置
    'text-field': ['get', 'num'],
  },
  paint: {
    'text-color': '#fff',
    'icon-color': ['get', 'color']
})

上一段代码中，我们在'icon-color'里配置图标实际展示的颜色，直接获取矢量数据的properties中color的值。

最后

需要注意的是，SDF功能比较适合单色图像。如果你的图像有多种颜色，你可以去看看牛老师的这篇博客mapboxGL中多颜色图标的实现_牛老师讲GIS的博客-CSDN博客。