Question

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

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

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

Answer 1

有一种方法，使用postcompose钩子。 @tschaub很久以前就创建了一个例子。见http://tschaub.net/ol3-video/examples/video.html。我用它创建了一个CodePan，它使用最新的OpenLayers版本。请参阅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 - 视频图层

1 个答案: