arcgis.js controls the display range of the map body to automatically bounce back when it exceeds the area (implementation ideas)

background

A while ago, we encountered a problem in a company project. The map base map area only has a part of the range. If it exceeds the current range, a white background will be displayed, which is very bad in terms of usage effect. The accompanying requirements are that the map should be zoomed out, and when the mouse moves the map beyond the display range of the base map, the base map needs to rebound.

Effect

Ideas

1. arcgis.js controls its display range and automatically bounces back when it exceeds the base map display range. (1) After the map is created, use the listener event to listen to the map range change and call the shwoExtent method, which will pass the values ​​of the upper left and lower right corners of the map.

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

(2) Determine whether the current map display range exceeds the visible range of the map based on the full extent of the map's maximum display range. If it exceeds the range, the map's maximum range is displayed and the map rebounds.

Code snippet

// 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 sets the map coordinate system}
    );
    this.gisMap.setExtent(fullExtent);
   }
  },

Reference document: https://developers.arcgis.com/javascript/3/jsapi/extent-amd.html

Note: When consulting the documentation, you need to know what version of arcgis.js is used in the project.

This is the end of this article about arcgis.js controlling the display range of map bodies and automatically rebounding when the display range exceeds the area. For more relevant content about arcgis.js map display range, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!