MapboxMigration
迁徙图，OD 对生成贝塞尔弧线，粒子沿线循环飞行并带渐变尾迹。
简介
MapboxMigration 由起讫点对（data 为 { from, to } 列表）生成贝塞尔弧线，粒子沿线循环飞行并带渐变尾迹；color / curvature / duration / lineWidth / particleRadius 控制外观与节奏。
用法
切换主色查看自北京出发的迁徙航线：
<script setup lang="ts">
withDefaults(defineProps<{ color?: string }>(), {
color: '#f43f5e'
})
// 自北京出发的迁徙航线
const routes: { from: [number, number]; to: [number, number] }[] = [
{ from: [116.4, 39.9], to: [121.47, 31.23] },
{ from: [116.4, 39.9], to: [113.26, 23.13] },
{ from: [116.4, 39.9], to: [104.07, 30.67] },
{ from: [116.4, 39.9], to: [87.62, 43.79] }
]
</script>
<template>
<div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
<MapboxMap
:options="{ style: 'mapbox://styles/mapbox/dark-v11', center: [104, 36], zoom: 3.2 }"
>
<MapboxMigration :data="routes" :color="color" />
</MapboxMap>
</div>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
data | MigrationRoute[]起讫点对列表 | |
layerId | string图层 id 前缀；省略时自动生成 | |
color | '#f43f5e' | string主色 |
curvature | 0.3 | number弧线弯曲程度 |
duration | 3000 | number单程飞行周期（毫秒） |
lineWidth | 2 | number线宽（像素） |
particleRadius | 4 | number粒子半径（像素） |
beforeId | string插入到该图层之前 |
Changelog
No recent changes