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

【问题标题】：Limit map area/zoom in arcGIS SceneView在 arcGIS SceneView 中限制地图区域/缩放
【发布时间】：2021-02-02 10:11:12
【问题描述】：

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

是否有任何潜在的解决方案？我首先认为使用constraints 属性可能会解决它，但似乎可以提供给它的属性非常有限： https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html#constraints

【问题讨论】：

标签： arcgis arcgis-js-api esri-loader

【解决方案1】：

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

收听查看属性变化，
检查约束，
采取相应措施。

看看我为你做的例子。在其中，我等待视图停止更新（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, 33.99],
            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>

【讨论】：