在遇到地圖對比的應用場景下，我們需要雙屏地圖或者多屏地圖來滿足我們的業務需求。
解決思路：首先生成兩份（多份）地圖，然后通過監聽地圖縮放拖拽，用地圖四至將不同的地圖對象做綁定，實現多地圖聯動。
前端部分
前端加入兩個 id 不同的 <div> 標簽，作為地圖的容器。例如：
<div id="mapDiv" style="position:absolute;left:0;width:50%;height:100%;"></div> <div id="mapdemo" style="position:absolute;left:50%;width:50%;height:100%;"></div>
這么做是將屏幕從中間一分為二，拆分為：
| 左側地圖 （mapDiv） |
右側地圖 （mapdemo） |
JS 部分
定義地圖對象
兩個地圖對象分別匹配到前端的容器中，例如：
map = new esri.Map("mapDiv",{
lods: lods,
logo: false,
zoom:11,
minZoom:3,
maxZoom:20,
center: [87.6,43.8],
slider:false,
});
toggleMap = new esri.Map("mapdemo",{
lods: lods,
logo: false,
zoom:11,
minZoom:3,
maxZoom:20,
center: [87.6,43.8],
slider:false
});
需要注意，多個地圖的基本屬性保持一致性。
添加底圖
左側地圖我們想要顯示衛星影像，右側地圖顯示平面地圖，則可以為不同的地圖對象添加不同的圖層。例如：
var ImgMap = new GoogleMapLayer(); ImgMap.id = "ImgMap"; map.addLayer(ImgMap); var VectorMap = new GoogleMapVectorLayer(); VectorMap.id = "VectorMap"; toggleMap.addLayer(VectorMap);
這里我使用了拓展類調用谷歌地圖的方法，簡化代碼，大家也可以根據自己的地圖服務資源對圖層進行替換。
監聽地圖
map.on("zoom-end",function(){
toggleMap.setExtent(map.extent);
});
map.on("mouse-up",function(){
toggleMap.setExtent(map.extent);
});
toggleMap.on("zoom-end",function(){
map.setExtent(toggleMap.extent);
});
toggleMap.on("mouse-up",function(){
map.setExtent(toggleMap.extent);
});
通過對兩個地圖“縮放結束”與“鼠標左鍵抬起”的監聽，來獲取地圖范圍產生變化結束的四至，然后將未產生變化的地圖范圍也設置未產生變化后的四至，從而實現兩個地圖在縮放與拖拽后能實現聯動。
我沒有對地圖縮放與拖拽過程中做監聽與聯動，大家如有需要也可以在地圖監聽類型中使用諸如“mouse-drag-start”、“mouse-drag-end”等監聽事件。
更多事件可以移步 - > 地圖監聽事件列表
最終我們就實現了左右兩側地圖的同屏聯動。
拓展聯想
基於上述的聯動的效果，我們不僅可以實現同屏多地圖的展示與聯動，還可以實現同屏不同專題地圖的動態演示。
大家如有好的想法，請在下方評論留言。