MapboxFlowBuilding
流动建筑,渐变着色加高亮带沿建筑高度循环流动。
简介
MapboxFlowBuilding 基于官方样式的 composite/building 渲染 3D 建筑:渐变着色 + 高亮带沿建筑高度循环流动;color / flowColor / duration / bandHeight / maxHeight 控制外观与节奏。需倾斜视角且缩放 ≥ minzoom(默认 15)。
用法
倾斜视角下查看高亮带在楼体上流动:
<template>
<div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
<MapboxMap
:options="{
style: 'mapbox://styles/mapbox/dark-v11',
center: [116.461, 39.909],
zoom: 15.5,
pitch: 60,
bearing: -20
}"
>
<MapboxFlowBuilding color="#1e3a8a" flow-color="#67e8f9" />
</MapboxMap>
</div>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
color | '#1e3a8a' | string基色 |
flowColor | '#67e8f9' | string流动高亮色 |
duration | 3000 | number流动周期(毫秒) |
bandHeight | 60 | number高亮带覆盖的高度范围(米) |
maxHeight | 300 | number建筑最大参考高度(米) |
minzoom | 15 | number最小缩放级别 |
layerId | string图层 id;省略时自动生成 | |
opacity | 0.85 | number整体透明度 |
beforeId | string插入到该图层之前 |
Changelog
No recent changes