OpenLayers-视频层

问题描述

我想通过OpenLayers地图(当前使用OL4)呈现视频(使用<video></video>元素)

我知道叠加可以帮助我在地图上呈现视频，但如果我想在其上添加层，叠加将位于这些层的顶部。

目前(在任何OL版本中)有这样做的方法吗？

推荐答案

有一种方法，可以使用postcompose挂钩。@tschaub很久以前就创造了一个例子。请参见http://tschaub.net/ol3-video/examples/video.html。我已经从它创建了一个使用最新OpenLayers版本的CodePan.请参阅http://codepen.io/anon/pen/GWQqzj。

postcompose挂钩如下所示：

layer.on('postcompose', function(event) {

  var frameState = event.frameState;
  var resolution = frameState.viewState.resolution;
  var origin = map.getPixelFromCoordinate(topLeft);

  var context = event.context;
  context.save();

  context.scale(frameState.pixelRatio, frameState.pixelRatio);
  context.translate(origin[0], origin[1]);
  context.rotate(rotation);
  context.drawImage(video, 0, 0, dx / resolution, height / resolution);

  context.restore();
});

rotation取自视频元数据。topLeft、dx和height根据视频的范围计算。

要循环视频的帧，需要在地图上间隔调用render：

setInterval(function() {
  map.render();
}, 1000 / 30);