将视图与偏移量同步

Question

将同一视图分配给多个 OpenLayers 地图会导致跨地图更新的同步视图（例如，当用户平移或缩放时）。我想让地图的视图同步，但有一个偏移量。通过在地图上重新使用视图，这仍然可能吗？还是我必须自己处理这些事件？

使用相同的视图与使用 OpenLayers 文档 (https://openlayersbook.github.io/ch03-charting-the-map-class/example-05.html) 中描述的 bindTo 方法有什么区别？

Answer 1

bindTo 已在 3.5.0 版本中删除（当前版本为 4.6.4）。因此，使用它会迫使您使用 2 年以上的 OpenLayers 版本。

另一方面，使用事件侦听器可以轻松实现单向绑定。

双向绑定很难实现，因为您必须确保不创建更新循环。如果您在两个地图上放置更改侦听器，它们会反复相互调用。

您可以通过摆弄事件值轻松偏移第二张地图的中心位置。

var view = new ol.View({
  center: [0, 0], zoom: 2
});
var view2 = new ol.View({
  center: [0, 0], zoom: 2
});
var source = new ol.source.OSM();

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: source
    })
  ],
  target: 'map',
  view: view
});
var map2 = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map2',
  view: view2
});

function updateView(event, viewRef){
  let newValue = event.target.get(event.key);

  if(event.key === 'center') {
    // we need to transform the value, it comes in the wrong projection
    newValue = ol.proj.transform(newValue , source.getProjection(), 'EPSG:3857');
    // offset the value somehow here
  }
  viewRef.set(event.key, newValue);
}

view.on('change:resolution', function(event){
  updateView(event, view2);
});

view.on('change:center', function(event){
  updateView(event, view2);
});

  .map{
    max-height: 100px;
  }

<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" class="map"></div>
<div id="map2" class="map"></div>

将视图与偏移量同步

Sync views with offset

openlayers

openlayers-3