OpenLayers 4 可以移动叠加瓦片地图的显示位置吗？

Question

我现在使用 OpenLayers 4 在底图上叠加一些瓦片图像地图。但是有些图层数据不准确，所以图层的特征位置与底图的位置偏移很小。为避免这种情况，我想显示图层从原始图块位置稍微偏移...在 OpenLayers 4 中是否可行？

Answer 1

OpenLayers 通常使用 canvas 渲染（您可以告诉它不要这样做）并公开挂钩以便您可以操纵渲染上下文。 Layer Spy examples shows us how to do that. The API for can be found here，包括所有可用方法的列表。一个是 void ctx.translate(x, y);

下面的示例有两个基础层，其中一个偏移了 50 像素。请注意，如果您的偏移量是空间偏移而不仅仅是像素（计算当前缩放级别的偏移量由您决定），您可能必须考虑缩放级别。

const tileA = new ol.layer.Tile({
  source: new ol.source.OSM(),
  opacity: 1
});

const tileB = new ol.layer.Tile({
  source: new ol.source.OSM(),
  opacity: 0.5
});

// before rendering the layer, move it
tileB.on('precompose', function(event) {
  var ctx = event.context;
  // in case 1 pixel is not really 1 pixel, e.g iPhone
  var pixelRatio = event.frameState.pixelRatio;
  ctx.save();
  ctx.translate(pixelRatio * 50, pixelRatio * 50);
});

// after rendering the layer, restore the canvas context,
// so that continous rendering cycles do not stack
tileB.on('postcompose', function(event) {
  var ctx = event.context;
  ctx.restore();
});


const map = new ol.Map({
  target: document.getElementById('map'),
  view: new ol.View({
    center: ol.proj.fromLonLat([76.8512, 43.2220]),
    zoom: 15
  }),
  layers: [ tileA, tileB ]
});

#map {
  /* just for testing purposes */
  width: 100%;
  min-width: 240px;
  max-width: 500px;
  margin-top: 50px;
  height: 200px;
}

<link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script>
<div id="map"></div>

OpenLayers 4 可以移动叠加瓦片地图的显示位置吗？

Can OpenLayers 4 shift the showing position of overlaying tile map?

openlayers

openlayers-3