0

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

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

4

1 回答 1

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>

于 2020-10-22T04:59:16.493 回答