VVideoSource

VVideoSource ：包含视频的数据源。

• 配置文档
• 样式规范

基础用法

video-source.vue

<script lang="ts" setup>
import type { MapboxProps, VideoSourceProps } from '@movk-repo/mapbox'
import { VMapbox, VRasterLayer, VUIControl, VVideoSource } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const options: MapboxProps['defaultOptions'] = {
  minZoom: 14,
  zoom: 17,
  center: [-122.514426, 37.562984],
  bearing: -96,
}

const urls = [
  'https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4',
  'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm',
]
const coordinates: VideoSourceProps['coordinates'] = [
  [-122.51596391201019, 37.56238816766053],
  [-122.51467645168304, 37.56410183312965],
  [-122.51309394836426, 37.563391708549425],
  [-122.51423120498657, 37.56161849366671],
]

const playing = ref(true)
</script>

<template>
  <VMapbox type="satellite-v9" :access-token="accessToken" :default-options="options">
    <VVideoSource :urls="urls" :coordinates="coordinates" :playing="playing">
      <VRasterLayer />
    </VVideoSource>
    <VUIControl bg-white>
      <ElSwitch v-model="playing" active-text="播放" inactive-text="暂停" />
    </VUIControl>
  </VMapbox>
</template>

隐藏源代码

Api

videoSourceProps

属性名	说明	类型	默认值
urls	视频源的URL	array	必填
coordinates	图像角点坐标,左上顺时针	array	必填
playing	是否播放视频	boolean	true

videoSourceEmits

事件名	说明	回调参数
load	源加载完成后触发	Function

类型定义

VideoSourceLoadEvent

sources/VideoSource/VideoSource.ts

export interface VideoSourceLoadEvent {
  source: VideoSource
  map: Map
}