使用 ArcGIS 地图向下滚动页面

Question

我正在为我的地图使用 ArcGIS API 4.0 版。

每当加载地图时，用户必须向下滚动才能看到地图。 这是我面临的第一个问题。

我的地图位于页面中间某处，因此用户必须向下滚动才能查看。

那么如果点击地图上的某个点或者拖动放大某个区域，地图上显示为选择的指针并不是鼠标指向的确切点。它指向鼠标指针上方的位置。

这是一个示例代码。

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Add the Compass widget to a basic 2D map - 4.0</title>

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

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

  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Compass",
        "dojo/domReady!"
      ],
      function(
        Map,
        MapView,
        Compass
      ) {

        var map = new Map({
          basemap: "national-geographic"
        });

        var view = new MapView({
          container: "viewDiv",
          scale: 500000,
          center: [26.26, 39.17],
          map: map
        });

        /********************************
         * Create a compass widget object.
         *********************************/

        var compassWidget = new Compass({
          view: view
        });

        // Add the Compass widget to the top left corner of the view
        view.ui.add(compassWidget, "top-left");
      });
  </script>
</head>
<body>
<!-- add div for test-->
<div style="height:500px;"></div>
  <div id="viewDiv"></div>
</body>
</html>

注意：- arcgsi js api 样本也存在同样的问题... https://developers.arcgis.com/javascript/latest/sample-code/sandbox/sandbox.html?sample=get-started-mapview

如果你运行这段代码，你会看到如果你向下滚动并拖动一个区域（通过按住 shift 并拖动鼠标），它会拖动一个区域到你的选择之上。

Answer 1

好吧，我注意到每当用户滚动时都会发生这种情况。所以我建议要么删除滚动条，要么减小顶部 header 容器的大小。

详情请参考下方运行代码:-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Add the Compass widget to a basic 2D map - 4.0</title>

  <style>
        html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    
  </style>

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

  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Compass",
        "dojo/domReady!"
      ],
      function(
        Map,
        MapView,
        Compass
      ) {

        var map = new Map({
          basemap: "national-geographic"
        });

        var view = new MapView({
          container: "viewDiv",
          scale: 500000,
          center: [26.26, 39.17],
          map: map
        });

        /********************************
         * Create a compass widget object.
         *********************************/

        var compassWidget = new Compass({
          view: view
        });

        // Add the Compass widget to the top left corner of the view
        view.ui.add(compassWidget, "top-left");
      });
  </script>
</head>
<body>
<!-- add div for test-->
<div style="height:100px;"></div>
  <div id="viewDiv"></div>
</body>
</html>

希望对您有所帮助:)

Answer 2

我在 ArcGIS 的一个论坛上发布了这个，后来知道这是 4.0 的一个错误，将在 4.1 中修复。

使用 ArcGIS 地图向下滚动页面

Scrolling down a page with a ArcGIS map

javascript

esri

arcgis

arcgis-js-api