如何在Mapbox GL中实现中心红边缘白的渐变可变半径圆形图层？

Mapbox GL的基础circle-color属性不直接支持径向渐变，但可以通过表达式结合像素距离计算实现从中心红色到边缘白色的线性渐变效果，且能适配你设置的动态半径。

修改后的完整图层配置代码 #

map.addLayer({
  // 你的图层其他配置（比如id、type、source等）
  ...
  paint: {
    'circle-color': [
      'interpolate',
      ['linear'],
      ['distance', ['pixel-center']],
      0, 'red',
      ['circle-radius'], 'white'
    ],
    'circle-radius': {
      property: 'point_count',
      stops: [
        [0, 10],
        [1, 15],
        [3, 20],
        [4, 25],
        [5, 30],
        [6, 35],
        [7, 40],
        [8, 45],
        [9, 50],
      ],
      default: 60,
      base: 1,
      type: 'exponential'
    }
  }
})

关键逻辑解释 #

• ['distance', ['pixel-center']]：该表达式会计算当前绘制的像素到圆形图层中心的像素距离，作为渐变的插值依据。
• interpolate + linear：设置线性插值规则：
  • 当距离为0（圆心位置）时，颜色取red；
  • 当距离等于当前圆形的半径（边缘位置）时，颜色取white；
  • 中间区域的像素会根据距离自动过渡颜色，实现平滑的线性渐变。
• 动态半径适配：因为表达式中直接引用了['circle-radius']，它会自动获取每个要素基于point_count计算出的动态半径值，所以不同大小的圆形都会生成适配自身尺寸的渐变效果。

注意事项 #

确保你的Mapbox GL JS版本不低于v1.10.0，这个版本开始支持pixel-center和distance这类像素级表达式。

内容的提问来源于stack exchange，提问作者shahrooz bazrafshan