MapboxVideoLayer
视频覆盖图层，把视频按四角经纬度贴合到地图，暴露播放控制。
简介
MapboxVideoLayer 把视频按四角经纬度贴合到地图（多格式 urls 回退），内部以 video 源 + raster 图层实现，并经 defineExpose 暴露 play / pause / video 供编程控制。
用法
叠加无人机航拍视频，按钮控制播放：
<script setup lang="ts">
const videoLayer = useTemplateRef('videoLayer')
// 四角经纬度：左上 / 右上 / 右下 / 左下
const coordinates: [[number, number], [number, number], [number, number], [number, number]] = [
[-122.51596391201019, 37.56238816766053],
[-122.51467645168304, 37.56410183312965],
[-122.51309394836426, 37.563391708549425],
[-122.51423120498657, 37.56161849366671]
]
const urls = [
'https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4',
'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'
]
</script>
<template>
<div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
<MapboxMap
:options="{
style: 'mapbox://styles/mapbox/satellite-streets-v12',
center: [-122.514, 37.563],
zoom: 17,
bearing: -96
}"
>
<div class="absolute left-3 top-3 z-10 flex gap-2">
<UButton size="xs" color="neutral" variant="solid" @click="videoLayer?.play()">
Play
</UButton>
<UButton size="xs" color="neutral" variant="solid" @click="videoLayer?.pause()">
Pause
</UButton>
</div>
<MapboxVideoLayer ref="videoLayer" :urls="urls" :coordinates="coordinates" />
</MapboxMap>
</div>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
urls | string[]视频地址列表（多格式回退） | |
coordinates | [[number, number], [number, number], [number, number], [number, number]]四角经纬度：左上/右上/右下/左下 | |
layerId | string图层 id；省略时自动生成 | |
opacity | 1 | number不透明度 |
beforeId | string插入到该图层之前 |
Expose
通过 useTemplateRef 访问组件实例。
| Name | Type |
|---|---|
play | () => void 播放视频 |
pause | () => void 暂停视频 |
video | () => HTMLVideoElement | undefined 底层 video 元素 |
Changelog
No recent changes