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

Question

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>

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

Answer 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>

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

Don't alow user to navagition or zoom out the area ARCGIS

html

javascript

arcgis

arcgis-js-api