OpenLayers 3:平铺图像层的每层转换 [英] OpenLayers 3: per-layer translation for tiled image layers

问题描述

有时将平移(即像素偏移)应用于图层(而不是其他图层)很有用.

Sometimes it's useful to apply translation (that is, pixel offset) to a layer (and not other layers).

例如，可以通过平移(即偏移)一层来直观地比较两个基于行的层.

For example, two line-based layers can be visually compared by translating (that is, offsetting) a layer.

对于矢量层，可以通过平移矢量要素来完成.但是对于平铺的图像层(例如，GeoServer生成的道路交通信息平铺)，该怎么做?

For vector layers, it can be done by translating vector features. But for the tiled image layers, (for example, road traffic information tiles generated by GeoServer) how can it be done?

推荐答案

这也是precompose和postcompose的一个很好的示例

This is also a nice example for precompose and postcompose render event handlers.

precompose在渲染图层之前触发，然后在postcompose之后触发.在事件处理程序内，您可以直接访问画布上下文，因此可以使用

precompose is triggered before a layer is rendered, and postcompose afterwards. Inside the event handlers you have direct access to the canvas context, so you can use CanvasRenderingContext2D.translate() to offset the rendering for a layer.

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/

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

Note: This example does not take into account rotated maps!

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

Update: As @zeodtr points out in his comment, there is a problem at the tile borders with this approach. The following screenshot created by him illustrates the problem:

这篇关于OpenLayers 3:平铺图像层的每层转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！