ArcGIS 4.x 以上版本实现地图超出范围后自动回弹

123 阅读1分钟

ArcGIS 3.x的版本 可以通过 map.on('extent-change',this.showExtent) 进行设置, 大家可以自行搜索实现。

而在 ArcGIS 4.x 中可以使用 mapView.watch("extent", fn) 来实现, 下面先来看下效果。

可以左右拖拽地图,使得地图显示区域为非中国后,松开鼠标,可以查看具体效果。

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Basemaps with different projections | Sample | ArcGIS Maps SDK for JavaScript 4.28</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.28/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/geometry/Extent",
      "esri/geometry/SpatialReference",
    ], function (
      Map,
      MapView,
      Extent,
      SpatialReference,
    ) {

      let extent = {
          "spatialReference": {
            "wkid": 4326
          },
          "xmin": 98.62482201651204,
          "ymin": 35.53402489401051,
          "xmax": 119.41887674720462,
          "ymax": 44.535089020502355
        },
        isFirstEextent = true;

      const map = new Map({
        basemap: "topo-vector"
      });

      const mapView = new MapView({
        map,
        container: "viewDiv",
        extent: new Extent(extent)
      });

      // 超出范围后回弹
      const setExtDebounce = () => {
        function debounce(callback, delay) {
          let timerId;
          return function (...args) {
            // 清除之前的定时器
            clearTimeout(timerId);

            // 设置新的定时器,延迟执行回调
            timerId = setTimeout(() => {
              // 在这里调用回调,并传递参数
              callback(...args);
            }, delay);
          };
        }

        function extentFn(ext, oldExt) {
          if (isFirstEextent) {
            isFirstEextent = false
            return;
          }

          let EXTENT = JSON.parse(JSON.stringify(extent))
          if (ext.xmin < EXTENT.xmin || ext.xmax > EXTENT.xmax || ext.ymax > EXTENT.ymax || ext.ymin < EXTENT
            .ymin) {
            let newExtent = new Extent({
              ...EXTENT,
              spatialReference: new SpatialReference({
                wkid: 4490
              })
            });
            // 设置视图的新范围
            mapView.extent = newExtent;
            mapView.goTo(newExtent);
            isFirstEextent = true;
          }
        }

        mapView.watch("extent", debounce(extentFn, 500))
      }

      setExtDebounce()
    });

  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>