Openlayers 3 OpenLayers 3：平铺图像层的每层转换

有时，将平移（即像素偏移）应用于某个层而不是其他层是很有用的

例如，可以通过平移（即偏移一个层）直观地比较两个基于线的层

---

对于向量层，可以通过转换向量特征来完成。但是对于平铺图像层，例如，由GeoServer生成的道路交通信息平铺如何实现？

这对于预合成和后合成处理程序也是一个很好的示例

在渲染层之前触发预合成，然后触发后合成。在事件处理程序中，您可以直接访问画布上下文，因此可以使用来偏移层的渲染

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();
});

注意：此示例不考虑旋转贴图

更新：正如@zeodtr在他的评论中指出的，这种方法在瓷砖边缘存在问题。以下由他创建的屏幕截图说明了问题：

---

这不适用于平铺层，因为该层仅渲染未转换贴图的可见范围。请检查瓷砖边界上的JSFIDLE。我已编辑了您的答案以显示问题。当同行评审完成后，它就会显现出来。那么这是如何结束的呢？“它遗漏了什么吗？”乔纳塔斯瓦尔克请阅读蔡尔文关于这个问题的答案。