OpenLayers

Question

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

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

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

Answer 1

有一个方法，就是使用 postcompose 钩子。 @tschaub 很久以前创建了一个示例。参见 http://tschaub.net/ol3-video/examples/video.html. I have created a CodePan from it which uses the latest OpenLayers version. See 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);

OpenLayers - 视频层

OpenLayers - Video layer

html5-video