OpenLayers - 视频层

Question

我想在 OpenLayers 地图（目前使用 OL4）上展示视频（使用 <video></video> 元素）

我知道叠加层可以帮助我在地图上显示视频，但如果我想在其上添加层，则叠加层位于这些层之上..

目前有办法（在任何 OL 版本中）这样做吗？

Answer 1

有一种方法，使用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);