MapboxFlowBuilding

View source
流动建筑,渐变着色加高亮带沿建筑高度循环流动。

简介

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

流动高亮色

duration3000number

流动周期(毫秒)

bandHeight60number

高亮带覆盖的高度范围(米)

maxHeight300number

建筑最大参考高度(米)

minzoom15number

最小缩放级别

layerIdstring

图层 id;省略时自动生成

opacity0.85number

整体透明度

beforeIdstring

插入到该图层之前

Changelog

No recent changes
Copyright © 2026 - 2026 YiXuan - MIT License