openlayers 视频图层加载

前言： 前段时间有看到高德地图上有个视频图层，而恰好OL上又没有的时候，突然萌生了一个写个插件怎么样的念头。于是乎，说干就干。 ol-video目前还不是一个涵盖有很多功能的ol插件，我应该会后续更新？os: 大概有鱼可摸的时候，恰好想到写了个这么玩意的时候。

npm 地址https://www.npmjs.com/package/ol-video

ol-video介绍

ol-video 是基于HTML5 Video Element进行渲染至ol地图上的一个插件，因此所有对DOM的操作都会实时的反应到该视频图层中。 为此如果你需要对该视频图层进行操作，可以通过操作VideoLayer的__VDOM属性得到需要的结果。

安装

npm install ol-video --save

使用示例

import VideoLayer from 'ol-video';
// ...map initMap
// 文件路径 以及 extent
let videoLayer = new VideoLayer({
    
    
  src: '/cloud.webm',
  extent: [68.17665, 7.96553, 97.40256, 35.49401]
})
map.addLayer(videoLayer)

改变视频图像

如上方介绍，理论上video DOM的 所有反应都可以实时的反应到地图图像上。

videoLayer.__VDOM.pause() // 暂停播放视频
videoLayer.__VDOM.play() // 播放视频

目前测试

EPSG:4326 与EPSG: 3857可正常运行请求视频渲染至地图指定的范围上。