ArcGIS for Javascript API 4.X 实现分屏对比中的地图联动功能的实现

分屏对比的关键就是多个地图的联动，本文将介绍通过ArcGIS for Javascript API 4.X来实现分屏对比中的地图联动功能

首先需要创建多个视图对象

//创建一个map
var map = new Map({
basemap: 'streets'
})
//定义一个数据来存放创建多个view，以便后面来批量进行进行操作
var views=[]
//根据需要来创建多个视图并绑定地图容器div的id
for(var i=0;i<m;i++){
var view = new MapView({
map: map,
container: 'map_'+i
})
views.push(view);
}

view的联动有一个很关键的属性就是extent，通过设置extent就可以设置view的可视化范围。

核心代码

//在页面加载完成后遍历views数组
on('load',function(){
views&&views.forEach(function(view){
//定义一个范围变量
var fullextent=null;
//设置鼠标滚轮事件
view.on("mouse-wheel",function(e){
//延迟获取范围的函数
window.setTimeout(function(){
//获取操作图层的范围
fullextent=view.extent
//遍历所有视图来设置这个范围
views.forEach(function(nview){
nview.extent=fullextent
})
},1000)
})
//设置鼠标拖拽事件
view.on("drag",function(e){
//获取操作图层的范围
fullextent=view.extent
//遍历所有视图来设置这个范围
views.forEach(function(nview){
nview.extent=fullextent
})
})
})
})

在4.X API中没有找到一个能监听view状态改变的事件所以用了‘mouse-wheel

’鼠标滚轮事件和‘drag’鼠标拖拽事件共同对view状态进行监听，但是有个小的问题就是鼠标滚轮事件的触发不是在滚动完成而是在滚动开始的时候，所以通过setTimeout来设置鼠标滚轮事件触发函数的延迟时间，最终可以实现。

最终效果：