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的boundsmapSerView: 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

转载于:https://www.cnblogs.com/telwanggs/p/7122647.html

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

arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
arcgis api for js入门开发系列三地图工具栏(含源代码)
上一篇实现了demo的地图加载展示,在上篇实现的基础上,新增了地图工具栏以及通用地图控件功能,比如地图框选缩放.地图漫游.清空.量算工具.地图导航控件.地图比例尺控件.地图鹰眼图等等,总共分为5个部分 ...
leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...
arcgis api for js入门开发系列十八风向流动图
本篇主要讲述的是利用arcgis api实现风向流动图,效果图如下: 实现思路: 在esri提供的开源githunb基础上进行修改的:https://github.com/gishome/wind-j ...
arcgis api for js入门开发系列十七在线地图（天地图、百度地图、高德地图）
本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源,简单封装一个底图切换控件js,在线地图包括:天地图.高德地图以及百度地图,效果图如下: 实现思路: 1.简单的底图切换控件map.L ...
arcgis api for js入门开发系列十二地图打印（GP服务）
上一篇实现了demo的地图统计图,本篇新增地图打印,截图如下: (1)地图打印实现的思路如下:首先在创建好地图打印GP模型,设置好模型的参数:其次是验证模型运行模型:然后是发布地图打印的GP服务:最后 ...
arcgis api 3.x for js 入门开发系列五地图态势标绘（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
android 原生开发 3d地图下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）...
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
openlayers4 入门开发系列之地图工具栏篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

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

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

最新文章

热门文章