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

本文介绍如何使用ArcGIS for JavaScript API 4.X实现多地图之间的联动功能,通过监听鼠标滚轮和拖拽事件来同步调整各地图的显示范围。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

分屏对比的关键就是多个地图的联动,本文将介绍通过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来设置鼠标滚轮事件触发函数的延迟时间,最终可以实现。

最终效果:
这里写图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值