MapboxBuildingLayer
3D 建筑图层，挤出官方样式的 composite/building 矢量源，可调颜色、透明度与起始缩放。
简介
MapboxBuildingLayer 把 Mapbox 官方样式自带的 composite / building 矢量源挤出为 3D 建筑，封装好高度表达式，开放 color / opacity / minzoom 快捷设置。
依赖官方样式的
composite/building 源，天地图等空样式下无效；需地图 pitch 与较高 zoom（默认 minzoom 15）才能看到建筑。用法
俯仰视角下渲染城市 3D 建筑：
<script setup lang="ts">
// MapboxBuildingLayer 默认消费官方样式的 composite/building 矢量源
</script>
<template>
<div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
<MapboxMap
:options="{
style: 'mapbox://styles/mapbox/light-v11',
center: [116.461, 39.909],
zoom: 15.5,
pitch: 60,
bearing: -20
}"
>
<MapboxBuildingLayer color="#94a3b8" :opacity="0.85" />
</MapboxMap>
</div>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
layerId | string图层 id；省略时自动生成 | |
source | 'composite' | string矢量数据源 id |
sourceLayer | 'building' | string数据源图层名 |
color | '#aaa' | string建筑颜色 |
opacity | 0.8 | number整体透明度 |
minzoom | 15 | number显示建筑的最小缩放级别 |
paint | Record<string, unknown>整体覆盖 paint（提供时忽略 color/opacity 预设） | |
beforeId | string插入到该图层之前 |
Changelog
No recent changes