MapboxGradientBuilding
渐变建筑，按高度插值着色的 3D 建筑。
简介
MapboxGradientBuilding 基于官方样式的 composite/building 渲染 3D 建筑，并按高度在 stops 断点间插值着色；opacity / minzoom 控制透明度与起始缩放。需倾斜视角且缩放 ≥ minzoom（默认 15）。
用法
倾斜视角下按高度对楼体分级着色：
<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
}"
>
<MapboxGradientBuilding
:stops="[
[0, '#1e3a8a'],
[80, '#0ea5e9'],
[200, '#f59e0b'],
[400, '#f43f5e']
]"
:opacity="0.9"
/>
</MapboxMap>
</div>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
minzoom | 15 | number最小缩放级别 |
layerId | string图层 id；省略时自动生成 | |
stops | [number, string][]高度-颜色断点 | |
opacity | 0.85 | number整体透明度 |
beforeId | string插入到该图层之前 |
Changelog
No recent changes