14. Fill-extrusion 3D 建筑图层

14. Fill-extrusion 3D 建筑图层

概述

Fill-extrusion 图层将多边形拉伸为 3D 立体效果，常用于建筑可视化。本节学习：

• Fill-extrusion 图层基本用法
• fill-extrusion-height / fill-extrusion-base / fill-extrusion-color
• 城市建筑 3D 可视化

---

基本用法

map.addLayer({
  id: 'buildings-3d',
  type: 'fill-extrusion',
  source: 'buildings',
  paint: {
    'fill-extrusion-color': '#aaa',
    'fill-extrusion-height': ['get', 'height'],
    'fill-extrusion-base': 0,
    'fill-extrusion-opacity': 0.8
  }
})

---

Paint 属性

属性	说明	默认值
fill-extrusion-color	立体颜色	#000000
fill-extrusion-height	拉伸高度（米）	0
fill-extrusion-base	起始高度（米）	0
fill-extrusion-opacity	透明度	1
fill-extrusion-translate	偏移	[0, 0]
fill-extrusion-vertical-gradient	垂直渐变	true

---

数据驱动高度

paint: {
  'fill-extrusion-height': ['get', 'height'],
  'fill-extrusion-base': ['get', 'min_height'],
  'fill-extrusion-color': [
    'interpolate', ['linear'], ['get', 'height'],
    0, '#d4e6f1', 50, '#5dade2', 100, '#2471a3', 200, '#1a5276'
  ]
}

---

本课小结

• Fill-extrusion 将多边形拉伸为 3D
• fill-extrusion-height 和 fill-extrusion-base 控制高度
• 结合 pitch 倾斜地图获得 3D 视角
• 适合城市建筑、数据柱状图

---

📌 上一节：13. Heatmap 热力图层 📌 下一节：15. Marker 标记点