经纬志
首页 / MapLibre / 使用示例

3D 挤出

49 个面按属性拉成体块,高度与颜色都由 height 决定。 高度倍数滑块改变整体观感,不触碰数据。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

高度、基高、颜色三个绘制属性都支持表达式。 fill-extrusion-height 乘一个系数即可整体缩放, 表达式中保留 get,数据更新后仍然生效。

俯仰设为 55 度,既能看出体块的层次,又不会让远处建筑被地平线裁掉。 超过 60 度时建议同步调高 maxPitch,并留意画面边缘的裁切。

属性取值说明
fill-extrusion-height['*', ['get','height'], k]体块顶部高度,米
fill-extrusion-base0底部高度,做悬空结构时调整
fill-extrusion-opacity0.85略通透,能看见后排
fill-extrusion-colorinterpolate 按高度高处偏深,强化层次
pitch55初始俯仰角

示例的 49 个面是规则网格,实际建筑轮廓来自矢量瓦片。 体块之间重叠时没有遮挡剔除,密集城区应降低透明度或只画重点建筑。

性能瓶颈在填充率而不是顶点数。体块铺满屏幕时,移动端帧率下降明显; 限制 maxzoom 或只在放大后显示,是最直接的做法。