Mapbox GL JS中fill-extrusion无法正常显示的问题求助

我明白你现在的情况：Circle图层能正常展示，但换成Fill-Extrusion就出问题了——这大概率是因为Fill-Extrusion图层的高度配置逻辑和Circle不一样，它需要直接关联你的数据字段，而不是单纯的视觉缩放规则。我来给你调整代码，同时解释关键要点：

核心修改思路 #

Fill-Extrusion图层的核心是通过fill-extrusion-height属性绑定你的frequency字段，而不是像Circle那样用固定的缩放停止点。另外，原始的frequency数值可能太小，导致拉伸效果不明显，所以我们可以给它加一个乘数来放大高度。

完整的Fill-Extrusion图层代码 #

map.addLayer({
  'id': 'total-extrusion',
  'type': 'fill-extrusion',
  'source': {
    type: 'vector',
    url: 'mapbox://askakdagr8.9tklrr8g'
  },
  'source-layer': 'GroupedOutput-9i6ink',
  'paint': {
    // 绑定frequency字段，乘以5来放大拉伸高度（你可以根据需求调整这个乘数）
    'fill-extrusion-height': ['*', ['get', 'frequency'], 5],
    // 拉伸的基础高度（默认0，可根据需求调整）
    'fill-extrusion-base': 0,
    // 设置拉伸块的颜色
    'fill-extrusion-color': '#ff7770',
    // 可选：添加透明度，避免遮挡底层内容
    'fill-extrusion-opacity': 0.8,
    // 可选：根据缩放级别动态调整高度乘数，适配不同缩放场景
    // 'fill-extrusion-height': {
    //   'base': 1.5,
    //   'stops': [
    //     [12, ['*', ['get', 'frequency'], 2]],
    //     [22, ['*', ['get', 'frequency'], 10]]
    //   ]
    // }
  }
});

关键注意事项 #

• 字段类型确认：确保你的frequency字段是数值类型（不是字符串），如果是字符串类型，需要用['to-number', ['get', 'frequency']]转换后再使用，比如：

  'fill-extrusion-height': ['*', ['to-number', ['get', 'frequency']], 5]
  

• 数据源验证：确认source和source-layer的名称和你Circle图层里的完全一致，拼写错误是常见问题。
• 高度调整：如果拉伸效果太夸张或太矮，直接修改乘数（代码里的5）即可，或者用注释里的缩放停止点逻辑，让高度随地图缩放动态变化。

如果还是有问题，可以检查浏览器控制台的报错信息，通常会提示字段不存在、类型错误或者数据源加载失败的具体原因。

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