如何为单个建筑物着色？求助通过建筑ID实现building-extrusion转Fill-extrusion

完全可以针对单个建筑物进行自定义着色，核心思路是通过建筑物ID筛选目标要素，将默认的building-extrusion图层逻辑替换为fill-extrusion来实现自定义样式，具体步骤如下：

• 准备数据源与目标ID
  确保你的地图矢量数据源包含建筑物的唯一ID字段（如id、building_id，字段名取决于数据源定义），同时确认要突出的建筑物对应的ID值（比如"12345"）。

• 配置地图样式，替换图层逻辑
  先移除或禁用默认的building-extrusion图层（避免样式冲突），再新增fill-extrusion图层通过过滤器精准定位目标建筑物，示例代码（以Mapbox GL JS为例）：

  // 添加突出显示的建筑物图层
  map.addLayer({
    id: 'highlight-building',
    type: 'fill-extrusion',
    source: 'your-vector-source', // 替换为你的数据源名称
    'source-layer': 'buildings', // 替换为数据源中的建筑物图层名
    filter: ['==', 'building_id', '12345'], // 匹配目标建筑物ID
    paint: {
      'fill-extrusion-color': '#ff4500', // 自定义突出颜色
      'fill-extrusion-height': ['get', 'height'], // 读取数据源中的建筑物高度
      'fill-extrusion-base': ['get', 'min_height'], // 读取底层高度（若数据源包含）
      'fill-extrusion-opacity': 0.9
    }
  });
  
  // 可选：为其余建筑物添加默认样式图层
  map.addLayer({
    id: 'normal-buildings',
    type: 'fill-extrusion',
    source: 'your-vector-source',
    'source-layer': 'buildings',
    filter: ['!=', 'building_id', '12345'],
    paint: {
      'fill-extrusion-color': '#7f8c8d',
      'fill-extrusion-height': ['get', 'height'],
      'fill-extrusion-opacity': 0.6
    }
  });
  

• 关键注意事项

  • 确认数据源包含height、min_height等高度字段，若没有可手动设置固定值（如fill-extrusion-height: 25）
  • 过滤器中的字段名必须与数据源字段完全匹配，注意大小写与拼写
  • 其他地图库（如Leaflet结合矢量瓦片）核心逻辑一致：通过ID筛选要素，用填充拉伸图层实现自定义样式

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