arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了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>
3.在地图工具栏map.map2dPanel.js文件,新增地图分屏对比的菜单:
"<li class='mapcompare' id='mapCompare'>" + "<a href='javascript:void(0)' class='mapcomparebg' id='mapcompareType'><span class='mapcomparelabel'></span>地图对比</a><span class='raang_more' id='toolCur'></span>" + "<ul style='display: none;' id='mapcompareDiv'>" + "<li id='one-screen'><a href='javascript:void(0)'><span class='mapcomparelabel'></span>单屏</a></li>" + "<li id='two-screen'><a href='javascript:void(0)'><span class='mapcomparelabel'></span>二屏</a></li>" + "</ul>" + "</li>"+
4.map.map2dPanel.js响应地图分屏对比的菜单事件:
//地图对比 $("#mapCompare").bind("mouseenter", function () { if (!DCI.map2dTool.is_initialize) {//地图对比分屏,初始化加载一次 DCI.SplitScreen.initialize(map); DCI.map2dTool.is_initialize = true; } $("#mapcompareDiv").show(); }); $("#mapCompare").bind("mouseleave", function () { $("#mapcompareDiv").hide(); }); //地图对比 $("#mapcompareDiv li").click(function () { switch ($(this).index()) { case 0://单屏 $("#centerPanel").removeClass("map_two"); DCI.SplitScreen.splitMap('splitOne'); $("#toolBar").show(); break; case 1://二屏 //动态设置二屏高度 var mainmapheight = $("#map").css("height"); $("#map-two").css("height", mainmapheight); $("#centerPanel").addClass("map_two"); DCI.SplitScreen.splitMap('splitTwo'); $("#toolBar").hide(); break; default: } });
二、谈谈实现地图分屏对比模块的思路:
该功能模块实现的核心就是如何让两个地图同步,里面关键是调用地图范围变化监听事件extent-change,通过对两个地图extent-change事件的监听,不论你操作任意一个地图,主要地图范围发生变化(地图缩放、地图拖动平移等等),另一个地图都会监听到,然后获取到主地图当前时刻的地图范围,然后更新同步过来;
1.地图监听事件:
/*添加事件*/ _addclickEvent: function () { if (DCI.SplitScreen.objMap.mapOne && !DCI.SplitScreen.clickOne) { DCI.SplitScreen.mapOne_handle = DCI.SplitScreen.objMap.mapOne.on('extent-change', DCI.SplitScreen._extentchangeEvent); DCI.SplitScreen.mapOne_movehandle = DCI.SplitScreen.objMap.mapOne.on('mouse-move', DCI.SplitScreen._moveEvent); DCI.SplitScreen.clickOne = true; } if (DCI.SplitScreen.objMap.mapTwo && !DCI.SplitScreen.clickTwo) { DCI.SplitScreen.mapTwo_handle = DCI.SplitScreen.objMap.mapTwo.on('extent-change', DCI.SplitScreen._extentchangeEvent); DCI.SplitScreen.mapTwo_movehandle = DCI.SplitScreen.objMap.mapTwo.on('mouse-move', DCI.SplitScreen._moveEvent); DCI.SplitScreen.clickTwo = true; } },
2.地图监听事件结果同步地图:
_extentchangeEvent: function (evt) { var map = this; var extent = evt.extent; var mapZoom = map.getZoom(); DCI.SplitScreen.mapSerView({ extent: extent, zoom: mapZoom, map: map }); },
// 设置map的bounds mapSerView: function (options) { for (obj in DCI.SplitScreen.objMap) { if (DCI.SplitScreen.objMap[obj] && DCI.SplitScreen.objMap[obj]) { if (DCI.SplitScreen.objMap[obj] == options.map) { continue; } if (Math.abs(options.extent.xmin - DCI.SplitScreen.objMap[obj].extent.xmin) > 0.0001 || Math.abs(options.extent.ymin - DCI.SplitScreen.objMap[obj].extent.ymin) > 0.0001) { DCI.SplitScreen.objMap[obj].centerAndZoom(options.extent.getCenter(), options.zoom); } } } DCI.SplitScreen.clearExtentchange(); clearTimeout(this.eventTimer); //创建新resize Timer,让它延迟0.4秒触发 DCI.SplitScreen.eventTimer = setTimeout(function () { DCI.SplitScreen.addEvent(); }, 400); },
具体实现的详细过程,下载源代码:http://pan.baidu.com/s/1dFsUN8d