ArcGIS API For Javascript ：双屏（多屏）地图联动的方法

 

在遇到地图对比的应用场景下，我们需要双屏地图或者多屏地图来满足我们的业务需求。

 

解决思路：首先生成两份（多份）地图，然后通过监听地图缩放拖拽，用地图四至将不同的地图对象做绑定，实现多地图联动。

 

前端部分

前端加入两个 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”等监听事件。

更多事件可以移步 - > 地图监听事件列表

 

最终我们就实现了左右两侧地图的同屏联动。

 

拓展联想

基于上述的联动的效果，我们不仅可以实现同屏多地图的展示与联动，还可以实现同屏不同专题地图的动态演示。

大家如有好的想法，请在下方评论留言。