视频图层（VideoLayer）

视频图层，可以将视频按照目标经纬度范围贴到地图上

示例

示例源码

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbMap, MbTiandituLayer, MbVideoLayer } from '@mapbox-react/core'

const App = () => {
  const [mapCenter] = useState([116.4228057861328, 39.93632920085673])
  const [zoom, setZoom] = useState(10)

  const video = {
    urls: ['https://vjs.zencdn.net/v/oceans.mp4'],
    coordinates: [
      [116.3594627380371, 39.93632920085673],
      [116.4228057861328, 39.93632920085673],
      [116.4228057861328, 39.89735776851477],
      [116.3594627380371, 39.89735776851477],
    ],
  }

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom} pitch={10}>
        <MbTiandituLayer types={['vec']} />
        <MbVideoLayer urls={video.urls} coordinates={video.coordinates} />
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

API

PROPS

名称	描述	类型	默认值
coordinates	图片四个角的经纬度数组，顺序：左上、右上、右下、左下 eg:[ [-80.425, 46.437], [-71.516, 46.437], [-71.516, 37.936], [-80.425, 37.936] ]	Array<number[]>	-
urls	视频资源路径 数组中可添加多个视频地址，以便对不同浏览器进行兼容	string[]	-
id	图层id	string	-
show	是否显示	boolean	true

EVENTS

名称	描述	参数
onCreated	地图初始化完成事件	-

METHODS

名称	描述	定义