Блог

Главная - Вопросы по программированию - Не разрешайте пользователю использовать навигацию или уменьшать масштаб области ARCGIS

Не разрешайте пользователю использовать навигацию или уменьшать масштаб области ARCGIS

#javascript #html #arcgis #arcgis-js-api

#javascript #HTML #arcgis #arcgis-js-api

Вопрос:

 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>

Я хочу, чтобы пользователи просто перемещались и увеличивали область, которую я выбираю. Я использую геометрию, но она не работает, пользователи все равно могут уменьшать масштаб области. Есть ли какой-либо способ реализовать эту функцию?

Ответ №1:

Ваша попытка была хорошей, но недостаточной. Это constraints свойство полезно для масштабирования и масштабирования, но в вашем случае оно не подходит для области. Причина в том, что extent constraints свойство of должно разрешать боковое перемещение.

Итак, я предлагаю вам использовать 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 amp;amp; 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>