Leaflet JS - 实施手势处理以强制执行 2 指滚动

Question

您知道何时在移动设备上向下滚动具有 google 地图的网页。地图变暗并告诉你 "Use two fingers to move the map"。

我想在我的 Leaflet 地图中实现这一点。 Leaflet 目前不提供这种开箱即用的功能。

Google 将此功能称为手势处理。如果您将它设置为 "Cooperative"，您将获得我刚才描述的效果。 https://developers.google.com/maps/documentation/javascript/interaction

如我的代码示例所示，检测所用手指的数量并显示消息非常容易。（您需要在移动设备或模拟器上运行才能看到它的效果）

如果是 1 个手指，我取消 touchmove 事件并显示我的警告。否则我允许事件应用于地图。但是我需要想出一些方法，在我在地图上取消它之后将一个手指触摸事件应用到包含页面。这样用户就可以滚动页面。

有没有人知道如何实现这一点？我考虑过使用 dispatchEvent 将接收到的 touchmove 事件对象直接中继到父文档。例如： document.dispatchEvent（触摸移动事件）；但没有运气。也许有更好的整体方法。

var myMap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19
}).addTo(myMap);

$("#mapid").on("touchmove", function(e) {
  if (e.touches.length !== 2) {
    $('.mask').fadeIn();
    return false;
  }
});

$("#mapid").on("touchend", function(e) {
  if ($('.mask').is(':visible')) {
    $('.mask').fadeOut();
  }
});

#mapid {
  height: 600px;
}

.mask {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  z-index: 400;
}

.message {
  color: #ffffff;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <head>

    <body>
      <h1>Leaflet Map</h1>

      <div id="mapid"></div>
      <div class="scroll-shield"></div>
      <div class="mask">
        <div class="message">
          <p>Use two fingers to move the map</p>
        </div>
      </div>

      <h2>Stuff below</h2>
      <ul>
        <li>Here</li>
        <li>is</li>
        <li>some</li>
        <li>stuff</li>
        <li>below</li>
      </ul>

    </body>

Answer 1

关键是确保在初始化地图时禁用拖动、点击和 scrollWheelZoom。

然后在检测到 2 指拖动或使用 command 或 ctrl 键滚动时暂时 re-enabling 它们。

我现在已经将这个解决方案打包成传单插件。

https://github.com/elmarquis/Leaflet.GestureHandling

Leaflet JS - 实施手势处理以强制执行 2 指滚动

Leaflet JS - Implementing Gesture Handling to enforce 2 fingered scrolling

javascript

dispatchevent

leaflet

touchmove