不允许用户导航或缩小区域 ARCGIS答案

【问题标题】：Don't alow user to navagition or zoom out the area ARCGIS不允许用户导航或缩小区域 ARCGIS
【发布时间】：2021-04-19 05:23:26
【问题描述】：

require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
  var map = new Map({
    basemap: "topo-vector"
  });
 //create mapview
  var view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 4,
    center: [106.206230, 15.047079],
    constraints: {
      rotationEnabled: false,
      geometry: { // geo
        type: "extent",
        xmin: 97.539469,
        ymin: 25.084159,
        xmax: 114.382060,
        ymax: 6.848810
      },
    }, // longitude, latitude
  });
});

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

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

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

</html>

我希望用户只需导航并放大我选择的区域。我使用几何但它不起作用，用户仍然可以缩小该区域。有没有办法实现这个功能？

【问题讨论】：

标签： javascript html arcgis arcgis-js-api

【解决方案1】：

您的尝试很好，但还不够。 constraints 属性对于缩放和缩放很有用，但在您的情况下，它不适用于某个区域。原因是constraints属性的extent是为了允许横向移动。

因此，我建议您使用constraints 属性来进行缩放级别，并使用自定义逻辑将用户保持在某个区域。我为您编写的代码只是一个示例，请听取视图的更改并采取相应措施。在这种情况下，我检查视图中心点是否在所需范围内，如果不是，我会更正它。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

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

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

      const extent = new Extent({
        xmin: 97.539469,
        ymin: 25.084159,
        xmax: 114.382060,
        ymax: 6.848810,
        spatialReference: new SpatialReference({ wkid: 4326 })
      });

      const view = new MapView({
        container: 'viewDiv',
        map: map,
        zoom: 8,
        center: [106.206230, 15.047079],
        constraints: {
          minZoom: 8,
          maxZoom: 10
        }
      });

      view.graphics.add(
        new Graphic({
          geometry: extent,
          symbol: {
            type: 'simple-fill',
            fill: 'none',
            outline: {
              color: 'red',
              width: 2
            }
          }
        })
      );

      view.watch('updating', function(value) {
        if (!value && view.center) {
          const c = view.center.clone();
          if (c.longitude < extent.xmin) {
            c.longitude = extent.xmin;
          } else if (c.longitude > extent.xmax) {
            c.longitude = extent.xmax;
          }
          if (c.latitude > extent.ymin) {
            c.latitude = extent.ymin;
          } else if (c.latitude < extent.ymax) {
            c.latitude = extent.ymax;
          }
          if (!c.equals(view.center)) {
            view.goTo({ center: c }, { duration: 0 });
          }
        }
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

【讨论】：