在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上的。