MP4视频加载器（VideoMp4Loader）

环境：https & 较新版本浏览器支持

VideoMp4Loader 提供预加载MP4图标

示例

示例源码

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

const App = () => {
  const [mapCenter] = useState([115.124368, 29.216049])
  const [zoom, setZoom] = useState(10)

  const symbolDataSource = [
    {
      coordinates: [115.124368, 29.216049],
      properties: {
        icon: 'rain',
      },
    },
    {
      coordinates: [115.324368, 29.216049],
      properties: {
        icon: 'rain',
      },
    },
  ]

  const videos = [
    {
      name: 'rain',
      url: `https://mapbox-web.github.io/mapbox-react/videos/rains-s.mp4`,
      size: [54, 96],
    },
  ]

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <MbVideoMp4Loader videos={videos} />
        <MbTiandituLayer types={['vec']} />
        <MbSymbolLayer
          data={symbolDataSource}
          iconImageField="icon"
          iconSize={1.5}
          iconAllowOverlap
          textAllowOverlap
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

名称	描述	类型	默认值
videos	视频属性数组 数组中每个对象需包含必需的name属性以及图片相关信息	array<{ name: string; url: string, size?: number[], requestInit?: RequestInit }>	-

组件使用fetch去请求图片数据，如果是跨域请求，请在服务端配置CORS头部，requestInit为fetch的第二个参数

EVENTS

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

METHODS

名称	描述	定义