前言

在上一篇实例博客中（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 errormap.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博客。