VideoLayer

Video Layer, capable of projecting video onto a map within a target geographic area (latitude/longitude range).

Example

Example Source Code

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map :zoom="12" :pitch="40">
      <mb-tianditu-layer />
      <mb-video-layer :urls="urls" :coordinates="coordinates" />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
const urls = ['https://vjs.zencdn.net/v/oceans.mp4']
const coordinates = [
  [116.3594627380371, 39.93632920085673],
  [116.4228057861328, 39.93632920085673],
  [116.4228057861328, 39.89735776851477],
  [116.3594627380371, 39.89735776851477],
]
</script>

API

PROPS

Name	Description	Type	Default
coordinates	Coordinates of the four corners of the image, as an array of latitude/longitude pairs. The order is: top-left, top-right, bottom-right, bottom-left. Example: [ [-80.425, 46.437], [-71.516, 46.437], [-71.516, 37.936], [-80.425, 37.936] ]. These coordinates define the geographic bounds of the video overlay.	Array<number[]>	-
urls	Video resource URLs. An array of URLs pointing to the video resource. Multiple URLs can be provided for browser compatibility (e.g., different video formats like MP4, WebM, Ogg). The player will attempt to play the first compatible format it finds.	string[]	-
id	Layer ID. A unique identifier for the layer.	string	-
show	Visibility of the layer. If true, the layer is displayed; if false, the layer is hidden.	boolean	true

EVENTS

Name	Description	Parameters
created	Initialization complete event	-

SLOTS

Name	Description

METHODS

Name	Description	Definition