Question

我现在通过使用OpenLayers 4在底图上覆盖一些平铺图像映射。但是一些图层数据不准确，因此图层的特征位置与底图的特征位置相差无几。为了避免这种情况，我想显示图层从原始图块位置稍微移位...是否可以在OpenLayers 4中使用？

Answer 1

OpenLayers通常使用画布渲染（您可以告诉它不要）并公开挂钩，以便您可以操纵渲染上下文。 Layer Spy示例向我们展示了如何执行此操作。可以找到API 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可以移动覆盖瓷砖地图的显示位置吗？

1 个答案: