如何使兩個openlayers地圖工作同步

Question

我在我的頁面中創建了兩個開發者地圖，現在我希望它們能夠同步工作。

例如，一個地圖的中心或縮放被改變，然後另一個相應地改變其地圖。

反之亦然。

我應該在地圖上註冊哪個事件？

Answer 1

這確實是可能的，因爲我剛剛做到了。您需要捕捉被平移或縮放的地圖上的「移動結束」和「移動」事件（移動結束時會觸發移動結果，但您也可以捕獲「zoomend」以保證安全）。如果使用父映射作爲上下文來捕獲這些地圖，則可以獲取新的地圖中心。請記住，如果正在使用導航控件並且使用鼠標完成縮放，地圖中心會在地圖放大時更改。然後使用moveTo方法（childmap.moveTo（）。

我已經選擇了moveTo方法（儘管沒有很好的記錄），這是總是在任何地圖上的任何平移或縮放事件中最終調用的東西。 ，調用moveTo也會導致'move'，'moveend'事件在子地圖上被觸發

如果你使用json製作一個地圖集合，並使用jQuery，實際的代碼看起來像這樣我假設你知道如何陷阱的OpenLayers地圖事件）;

var newCentre = zoomedMap.getCenter(); 

$.each(maps, function (ind, map) { 
      if (map !== zoomedMap) map.moveTo(newCentre, newZoom); 
     }); 

其中地圖是對我的地圖收藏，zoomedMap是實際映射用戶觸發平移或縮放事件（我稱之爲zoomeMap，但它可以很容易地稱爲pannedMap），並且（很明顯）地圖是集合中需要移動的地圖。

在我解決上述代碼之前，我玩了一下。這樣做的好處是$ .each不會等待moveTo函數返回，所以您會看到一個非常光滑的同步。當然，如果你只同步兩張地圖，這並不是一個問題。

很抱歉，在提出問題後很久才發佈此消息，但也許它會幫助任何新的搜索者。