Mapbox GL JS：如何实现数据驱动热力图半径随缩放适配并解决报错？

你遇到的"expressions are not allowed in function stops"报错，本质是Mapbox的传统base+stops配置不支持在停止点内嵌入数据驱动表达式。要同时实现基于要素radius字段的动态半径和随缩放级别保持视觉一致的需求，直接用表达式系统替代传统函数配置即可。

核心解决方案：用表达式结合数据字段与缩放计算 #

原来的固定值缩放逻辑（base:2）本质是按半径基准值 * 2^(当前zoom - 基准zoom)的公式计算。把固定基准值换成从要素字段获取的radius，就能实现两者结合。

示例代码：

'heatmap-radius': [
  '*',
  ['get', 'radius'], // 获取当前要素的radius字段值
  ['^', 2, ['-', ['zoom'], 17]] // 按base=2的规则计算缩放倍数，基准zoom设为17
]

这个表达式的逻辑：

• 先从每个热力图要素中提取radius字段的值
• 计算当前缩放级别与基准级别17的差值，以此为指数、2为底数得到缩放倍数（和你之前base:2的缩放逻辑完全一致）
• 将字段值与缩放倍数相乘，得到最终的热力图半径

适配多缩放区间的复杂场景 #

如果需要在不同缩放区间使用不同的缩放比例（比如低zoom用更小的缩放底数），可以用case表达式做分支处理：

'heatmap-radius': [
  'case',
  // 缩放级别<17时，用base=1.5的缩放规则，基准zoom设为15
  ['<', ['zoom'], 17],
  ['*', ['get', 'radius'], ['^', 1.5, ['-', ['zoom'], 15]]],
  // 缩放级别在17-20之间，用base=2的规则
  ['<=', ['zoom'], 20],
  ['*', ['get', 'radius'], ['^', 2, ['-', ['zoom'], 17]]],
  // 缩放级别>20时，用base=3的规则
  ['*', ['get', 'radius'], ['^', 3, ['-', ['zoom'], 20]]]
]

验证效果 #

• 当地图缩放级别固定时，每个热力图点的半径由自身的radius字段值决定，完全实现数据驱动
• 当地图缩放级别变化时，所有点的半径都会按设定的比例同步缩放，保持视觉大小一致

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