OpenLayers 3：平铺图像层的每层翻译

Question

有时将转换（即像素偏移）应用于图层（而不是其他图层）非常有用。

例如，通过翻译（即抵消）图层，可以直观地比较两个基于线的图层。

对于矢量图层，可以通过翻译矢量要素来完成。但对于平铺图像图层（例如，GeoServer生成的道路交通信息图块）如何才能完成？

Answer 1

这也是precompose和postcompose render event处理程序的一个很好的示例。

precompose在渲染图层之前触发，之后postcompose触发。在事件处理程序内部，您可以直接访问画布上下文，因此可以使用CanvasRenderingContext2D.translate()来偏移图层的渲染。

roads2.on('precompose', function(event) {
  var ctx = event.context;
  ctx.save();
  ctx.translate(10, 10);
});

roads2.on('postcompose', function(event) {
  var ctx = event.context;
  ctx.restore();
});

http://jsfiddle.net/m1abjrkm/3/

注意：此示例未考虑旋转地图！

更新：正如@zeodtr在评论中指出的那样，使用这种方法在图块边框处存在问题。他创建的以下屏幕截图说明了问题：