ArcGIS.js实现地图超出底图范围自动回弹

作者：资源驿站

时间：2026-10-24

本文介绍在ArcGIS.js项目中解决地图超出底图显示区域出现白底的问题。通过监听extent-change事件，判断当前视图是否超出fullExtent最大范围，若超出则调用setExtent重置为最大范围，实现地图自动回弹效果。

文章目录

背景

近期在公司项目中遇到一个技术难点：地图底图仅定义了部分显示区域，当视角超出该区域时，背景会显示为白色，严重影响使用体验。因此需要实现一个功能：当用户缩小地图或移动鼠标导致视图超出底图显示范围时，地图应自动回弹至有效显示区域。

效果

思路

1、ArcGIS.js控制其显示范围，在超出底图显示范围时自动弹回来（1）地图创建完成之后使用监听事件监听地图范围改变调用shwoExtent方法，该方法会传一个地图的左上角和右下角的值


this.gisMap.on('extent-change',this.showExtent)

（2）根绝判断地图的最大显示范围 full extent来判断当前地图显示范围是否超出地图可视范围，当超出范围则显示地图的最大范围，地图回弹

代码片


// An highlighted block
let fullExtent={
    xmin: xx,
    ymin: xx,
    xmax: xx,
    ymax: xx,
   }
showExtent(extS){
   let ext=extS.extent;  
    if(ext.xmin<this.fullExtent.xmin||ext.xmax>this.fullExtent.xmax||ext.ymax>this.fullExtent.ymax||ext.ymin<this.fullExtent.ymin){
    let fullExtent = new esri.geometry.Extent(
     {
      ...this.fullExtent, 
      spatialReference:new esri.SpatialReference({ wkid: parseInt(4490) })//SpatialReference设置地图坐标系
     }
    );
    this.gisMap.setExtent(fullExtent);
   }
  },

参考文档：https://developers.arcgis.com/javascript/3/jsapi/extent-amd.html

注意：在查阅文档时需要知道项目中使用的是什么版本的arcgis.js

到此这篇关于arcgis.js控制地图地体的显示范围超出区域自动弹回的文章就介绍到这了,更多相关arcgis.js地图显示范围内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！