地信网论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

免费视频|新人指南|答学员问|投诉删帖

禁止上传涉密资料|赚取铜板|附件下载

查看: 129|回复: 1
收起左侧

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

[复制链接]
发表于 2016-11-30 08:53 | 显示全部楼层 |阅读模式

马上注册地信网,享受更多功能,学习更多知识,成就人生精彩!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
上一篇实现了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


发表于 2016-11-30 10:01 | 显示全部楼层
进来学习。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

论坛推荐话题上一条 /1 下一条

在线客服

手机版|新人指南|地信论坛 ( 湘ICP备14003170号-5 关于地信 联系方式 邮箱登陆

Powered by Discuz! X3.2

快速回复 返回顶部 返回列表