一次平移和缩放多个地图，同时仅与一个地图交互

Question

我有两个Openlayers地图，以两种不同的(无线电(频率显示天空区域的两张图像(png文件(。

我想知道是否可以将平移或缩放一张地图的结果复制到另一张地图并相互复制。换句话说，我希望有一个交互(平移 - 缩放(的效果，一个窗口同时复制到另一个地图上。

提前谢谢你

Answer 1

是的，你可以通过听一个ol的事件来做到这一点。在第二张地图上查看并应用它们。

使用change:resolution您可以捕捉缩放和change:center平移。

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 an other 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>