arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）

该功能模块实现的核心就是如何让两个地图同步，里面关键是调用地图范围变化监听事件extent-change，通过对两个地图extent-change事件的监听，不论你操作任意一个地图，主要地图范围发生变化（地图缩放、地图拖动平移等等），另一个地图都会监听到，然后获取到主地图当前时刻的地图范围，然后更新同步过来

前言

关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。

内容概览

1. 地图分屏对比功能讲解
2. 源代码 demo 下载

本篇实现地图分屏对比功能模块，截图如下：

对效果图的简单介绍一下，在 demo 只采用了两分屏对比，感兴趣的话，可以在两分屏的基础上拓展，修改 css 样式以及 js 控制，可以修改为多屏对比效果。1对应的是鼠标当前位置，2对应的是1在另一个分屏的地图位置；3是切图不同底图的作用。

地图分屏效果的对比，核心在于拥有不同年份或者不同类型的底图之间的对比才有意义的，这里的 dmeo 由于地图数据素材的限制，没有不同类型的底图，所以凑合的采用同一张底图的对比，但是分屏对比的功能效果是达到了的。

• 项目demo新增部分

1. 新增 map.splitScreen.js 文件，实现地图分屏对比功能模块的代码文件；
2. 在 map.html 页面引用 map.splitScreen.js：

<script type="text/javascript" src="js/main/map.splitScreen.js"></script>      

更多的详情见：GIS之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家作品店铺：GIS之家作品店铺

GIS之家源码咨询：GIS之家webgis入门开发系列demo源代码咨询