ArcGIS for Javascript API 4.X 快速实现卷帘功能

在GIS开发中往往需要进行对比，卷帘对比是比较常用的方式，本文就让我们来学习一下用ArcGIS for javascript API 4.X快速实现卷帘对比功能

既然是卷帘肯定是两幅地图之间的对比，所以首先需要建立两个view，分别绑定两个不同的div。

  var map1 = new Map({
          basemap: 'streets'
        })
  var view1 = new MapView({
          map: map1,
          container: 'map1'
        })
  var map2 = new Map({
          basemap: 'satellite'
        })
  var view2= new MapView({
          map: map2,
          container: 'map2'
        })

创建两个div标签作为地图容器

      `<div id='map1'>
          <div id='map2'></div>
      </div> `

设置两个div的style样式，任意大小只需要两个一样

  #map1{
      width:1180px;
      height:600px;
    }
  #map2{
       width:1180px;
       height:600px; 
    }

最重要的一步就是通过CSS中clip功能来实现卷帘效果，clip故名思议就是裁剪，用裁剪来决定显示的内容。
核心代码

map1toplayerdiv=map1toplayerdiv?map1toplayerdiv:dom.byId('map2');
        domStyle.set(map1toplayerdiv,'clip','rect(0px,0px,0px,0px)')
            view1.on('pointer-move',function(e){ 
                e.stopPropagation();
                map1toplayerdiv=map1toplayerdiv?map1toplayerdiv:dom.byId('map2'); 
            var  offsetX=e.x;
            var  offsetY=e.y;
            var  width=1180;
            var  height=600;
                domStyle.set(map1toplayerdiv,'clip','rect(0px,'+offsetX+'px,'+height+'px,0px)')
            });
            view2.on('pointer-move',function(e){ 
                e.stopPropagation();
                map1toplayerdiv=map1toplayerdiv?map1toplayerdiv:dom.byId('map2'); 
            var  offsetX=e.x;
            var  offsetY=e.y;
            var  width=1180;
            var  height=600;
                domStyle.set(map1toplayerdiv,'clip','rect(0px,'+offsetX+'px,'+height+'px,0px)')
            });

原理其实就是通过鼠标移动事件获取当前的相对于视图容器的x，y坐标来确定用作卷帘的范围 。还有很重要的一点就是需要设置两个view的’pointer-move’事件，才能具有卷帘的效果，因为你在向两个方向移动时鼠标的移动事件是在两个不同的view上的。