arcgis api for js入门开发系列六地图分屏对比-白红宇

arcgis api for js入门开发系列六地图分屏对比

阅读量：5919 次

发布时间：2019-06-19

本文共 3759 字，大约阅读时间需要 12 分钟。

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

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

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

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

一、项目demo新增部分：

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

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

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

"" +      "地图对比" +      "
      
       " +           "
       单屏
" +           "
       二屏
" +      "
      
" + "
"+

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://fnfvx.baihongyu.com/

你可能感兴趣的文章