オフセットを使用してビューを同期する

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です）。したがって、OpenLayersを2年以上使用する必要があります。

一方向バインディングは、イベントリスナーで簡単に実現できます。

更新ループを作成しないようにする必要があるため、双方向バインディングは非常に困難です。変更リスナーを両方のマップに配置すると、繰り返し呼び出すことになります。

2番目のマップの中心位置は、イベント値を参照して簡単にオフセットできます。

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>