開發雙視窗同步的系統

[info] 小提示：

程式碼連結：我是連結

有時候我們需要比對不同地圖的資訊，這時就需要將視窗一分為二，同時載入不同來源的地圖，並且讓他們同時進行移動及縮放。

在這裡我們示範以BING作為來源載入第二視窗。

先新增一個新的div區塊，並修改範圍讓它們各佔畫面一半。

<div id="MyMap" style="width: 50%;height: 100%;position: absolute;top: 0;left: 0;"></div>
<div id="MyMap2" style="width:50%;height: 100%;position: absolute;top: 0;left: 50%;"></div>

我們在script區塊的最尾端繼續新增程式碼，新增圖層以NLSC為來源

var mapView2 = new CMapView("MyMap2", 3857);
var mapDoc2 = new CMapDocument(3857);

var Patterns = [];
Patterns[0] = "http://ecn.t0.tiles.virtualearth.net/tiles/h{QuadKey}?g=3649&n=z";
var im = mapDoc2.NewTileMapLayerByMatrixSet("BING_MAP", Patterns, m, -1);

mapView2.Bind(mapDoc2, null);

接著監聽mapView的viewportchanged事件，當視野範圍有所變化時便會觸發事件

var running = false;
mapView.AddEventListener('viewportchanged', evt => {
    if (running) return;
    running = true; 
    mapView2.Viewport = mapView.Viewport;
    running = false;
});

同樣的也綁定mapView2的viewportchanged事件

mapView2.AddEventListener('viewportchanged', evt => {
    if (running) return;
    running = true; 
    mapView.Viewport = mapView2.Viewport;
    running = false;
});

兩段程式碼都使用了變數running，是由於事件觸發時，一方會去將另一方的viewport設成跟自己相同以達到同步目的。 當其中一者在改變另一方的Viewport時，會使對方也發出viewportchanged事件，如果沒有用此變數阻止，會導致不斷互相呼叫對方而陷入無窮迴圈。