Wechat: yu389741| Email: gisdqy@163.com

Shop:https://www.giserdqy.com/shop

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);
},

 

arcgis api for js3.x入门开发系列列表

  1. arcgis api离线部署
  2. 不同地图服务展示
  3. 地图工具栏
  4. 地图查询
  5. 地图态势标绘
  6. 地图分屏对比
  7. 图层控制
  8. 聚合效果
  9. 热力图效果
  10. 叠加SHP图层
  11. 地图统计图
  12. 地图打印(GP服务)
  13. 地图最短路径分析
  14. 最近设施点路径分析
  15. 台风轨迹
  16. 迁徙流动图
  17. 在线地图(天地图、百度地图、高德地图)
  18. 风向流动图
  19. 图层在线编辑
  20. 打印地图的那些事
  21. 气泡窗口信息动态配置模板

干货:

  1. 自写算法实现地图量算工具
  2. 自定义Navigation控件样式风格
  3. 热力图优化篇-不依赖地图服务
  4. 实现克里金插值渲染图–不依赖GP服务
  5. echarts开源js库实现地图统计图分析