在arcGIS SceneView中限制地图区域/缩放

如何解决在arcGIS SceneView中限制地图区域/缩放

我在本地查看模式下使用arcGIS SceneView来显示WebMap。我试图限制某个区域的缩放级别和范围，以使用户只能看到美国，夏威夷和阿拉斯加，而不能在此范围之外移动。我还需要限制缩放级别，因为如果用户将地图缩小得太远，则会过度缩放地图并看到直到/未映射的空间。

有没有可能解决这个问题？我首先认为使用constraints属性可以解决此问题，但是似乎可以馈给此属性的属性非常有限： https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html#constraints

解决方法

一种实现我认为想要的方法是：

收听以查看属性更改，
检查约束
采取相应行动。

看看我为您制作的示例。在其中，我等待视图停止更新（updating属性），然后检查约束。如果超出比例或超出范围，则重置视图。您可能想要其他操作，我只是简单地说了。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    View constraints
  </title>

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

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

      const extent = Extent.fromJSON(
        {
          "spatialReference": {
            "latestWkid":3857,"wkid":102100
          },"xmin":-13119716.983985346,"ymin":4024337.3961656773,"xmax":-13096023.097830579,"ymax":4030581.302795334
        }
      );

      const MIN_SCALE = 12000;
      const MAX_SCALE = 48000;

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

      const view = new SceneView({
        container: "viewDiv",map: map,viewingMode: "local",center: [-117.75,33.99],scale: 24000
      });

      function resetView() {
        console.log('reset');
        view.goTo(
          {
            center:[-117.75,scale: 24000
          }
        );
      }

      view.watch("updating",function (value) {
        if (!value) {
          if (
            // out of scale
            view.scale < MIN_SCALE ||
            view.scale > MAX_SCALE ||
            // out of extent
            view.extent.xmin < extent.xmin ||
            extent.xmax < view.extent.xmax ||
            view.extent.ymin < extent.ymin ||
            extent.ymax < view.extent.ymax 
          ) {
            resetView();
          };
        }
      });

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

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

</html>