arcgis api for js入门开发系列六地图分屏对比(含源代码)

sinna

上一篇实现了demo的地图标绘模块，本篇新增地图地图分屏对比模块，截图如下（源代码见文章底部）：

对效果图的简单介绍一下，在demo只采用了两分屏对比，感兴趣的话，可以在两分屏的基础上拓展，修改css样式以及js控制，可以修改为多屏对比效果：

1对应的是鼠标当前位置，2对应的是1在另一个分屏的地图位置；3是切图不同底图的作用。

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

一、项目demo新增部分：

1.新增map.splitScreen.js文件，实现地图分屏对比功能模块的代码文件；

2.在map.html页面引用map.splitScreen.js：

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

复制代码

3.在地图工具栏map.map2dPanel.js文件，新增地图分屏对比的菜单：

1. "<li class='mapcompare' id='mapCompare'>" +
   
2.       "<a href='javascript:void(0)' class='mapcomparebg' id='mapcompareType'><span class='mapcomparelabel'></span>地图对比</a><span class='raang_more' id='toolCur'></span>" +
   
3.       "<ul style='display: none;' id='mapcompareDiv'>" +
   
4.            "<li id='one-screen'><a href='javascript:void(0)'><span class='mapcomparelabel'></span>单屏</a></li>" +
   
5.            "<li id='two-screen'><a href='javascript:void(0)'><span class='mapcomparelabel'></span>二屏</a></li>" +
   
6.       "</ul>" +
   
7. "</li>"+

复制代码

4.map.map2dPanel.js响应地图分屏对比的菜单事件：

1. //地图对比
   
2.         $("#mapCompare").bind("mouseenter", function () {
   
3.             if (!DCI.map2dTool.is_initialize) {//地图对比分屏,初始化加载一次
   
4.                 DCI.SplitScreen.initialize(map);
   
5.                 DCI.map2dTool.is_initialize = true;
   
6.             }
   
7.             $("#mapcompareDiv").show();
   
8.         });
   
9.         $("#mapCompare").bind("mouseleave", function () { $("#mapcompareDiv").hide(); });
   
10.         //地图对比
    
11.         $("#mapcompareDiv li").click(function () {
    
12.             switch ($(this).index()) {
    
13.                 case 0://单屏
    
14.                     $("#centerPanel").removeClass("map_two");
    
15.                     DCI.SplitScreen.splitMap('splitOne');
    
16.                     $("#toolBar").show();
    
17.                     break;
    
18.                 case 1://二屏     
    
19.                     //动态设置二屏高度
    
20.                     var mainmapheight = $("#map").css("height");
    
21.                     $("#map-two").css("height", mainmapheight);
    
22.                     $("#centerPanel").addClass("map_two");
    
23.                     DCI.SplitScreen.splitMap('splitTwo');
    
24.                     $("#toolBar").hide();
    
25.                     break;
    
26.                 default:
    
27.             }
    
28.         });

复制代码

二、谈谈实现地图分屏对比模块的思路：

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

1.地图监听事件：

1. /*添加事件*/
   
2.     _addclickEvent: function () {
   
3.         if (DCI.SplitScreen.objMap.mapOne && !DCI.SplitScreen.clickOne) {
   
4.             DCI.SplitScreen.mapOne_handle = DCI.SplitScreen.objMap.mapOne.on('extent-change', DCI.SplitScreen._extentchangeEvent);
   
5.             DCI.SplitScreen.mapOne_movehandle = DCI.SplitScreen.objMap.mapOne.on('mouse-move', DCI.SplitScreen._moveEvent);
   
6.             DCI.SplitScreen.clickOne = true;
   
7.         }
   
8.         if (DCI.SplitScreen.objMap.mapTwo && !DCI.SplitScreen.clickTwo) {
   
9.             DCI.SplitScreen.mapTwo_handle = DCI.SplitScreen.objMap.mapTwo.on('extent-change', DCI.SplitScreen._extentchangeEvent);
   
10.             DCI.SplitScreen.mapTwo_movehandle = DCI.SplitScreen.objMap.mapTwo.on('mouse-move', DCI.SplitScreen._moveEvent);
    
11.             DCI.SplitScreen.clickTwo = true;
    
12.         }
    
13.     },

复制代码

2.地图监听事件结果同步地图：

1.    _extentchangeEvent: function (evt) {
   
2.         var map = this;
   
3.         var extent = evt.extent;
   
4.         var mapZoom = map.getZoom();
   
5.         DCI.SplitScreen.mapSerView({ extent: extent, zoom: mapZoom, map: map });
   
6.     },

复制代码

1. // 设置map的bounds
   
2.     mapSerView: function (options) {
   
3.         for (obj in DCI.SplitScreen.objMap) {
   
4.             if (DCI.SplitScreen.objMap[obj] && DCI.SplitScreen.objMap[obj]) {
   
5.                 if (DCI.SplitScreen.objMap[obj] == options.map) {
   
6.                     continue;
   
7.                 }
   
8.                 if (Math.abs(options.extent.xmin - DCI.SplitScreen.objMap[obj].extent.xmin) > 0.0001 ||
   
9.                 Math.abs(options.extent.ymin - DCI.SplitScreen.objMap[obj].extent.ymin) > 0.0001) {
   
10.                     DCI.SplitScreen.objMap[obj].centerAndZoom(options.extent.getCenter(), options.zoom);
    
11.                 }
    
12.             }
    
13.         }
    
14.         DCI.SplitScreen.clearExtentchange();
    
15.         clearTimeout(this.eventTimer);
    
16.         //创建新resize Timer，让它延迟0.4秒触发
    
17.         DCI.SplitScreen.eventTimer = setTimeout(function () {
    
18.             DCI.SplitScreen.addEvent();
    
19.         }, 400);
    
20.     },

复制代码

具体实现的详细过程，下载源代码：http://pan.baidu.com/s/1dFsUN8d

GIS作品：百度搜索：GIS之家(https://shop116521643.taobao.com/shop/view_shop.htm)
QQ兴趣部落GIS技术交流：gis之家(http://buluo.qq.com/p/barindex.html?bid=327395)
GIS毕业设计&项目承接群：238339408
GIS技术交流群：432512093

ccxxbb

进来学习。