Leaflet JS - 实现手势处理以强制 2 手指滚动

2022-01-12 00:00:00 leaflet javascript dispatchevent touchmove

您知道当您使用移动设备并向下滚动包含谷歌地图的网页时.地图变暗并告诉您用两根手指移动地图".

You know when you're on a mobile device and you scroll down a web page which has a google map. The map goes dark and tells you "Use two fingers to move the map".

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

I want to implement exactly this in my Leaflet map. Leaflet doesn't currently offer this kind of functionality out the box.

Google 将此功能称为手势处理.如果你将它设置为合作"，你就会得到我刚才描述的效果.https://developers.google.com/maps/documentation/javascript/interaction

Google refers to this functionality as Gesture Handling. If you set it to "Cooperative" you get the effect I just described. https://developers.google.com/maps/documentation/javascript/interaction

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

It's easy enough to detect the number of fingers being used and display the message as shown in my code example. (You'll need to run this on a mobile device or emulator to see it in effect)

如果是 1 根手指，我会取消 touchmove 事件并显示我的警告.否则，我允许该事件应用于地图.但是在我在地图上取消它之后，我需要想办法将一个手指触摸事件应用到包含页面.以便用户滚动页面.

If it's 1 finger I cancel the touchmove event and show my warning. Otherwise I allow the event to apply to the map. But I need to figure out some way of applying that one fingered touch event to the containing page after I've cancelled it on the map. So that the user scrolls the page instead.

有没有人有任何好主意如何实现这一目标?我想过使用 dispatchEvent 将接收到的 touchmove 事件对象直接中继到父文档.例如:document.dispatchEvent(touchmoveevent);但没有运气.也许有更好的整体方法.

Does anyone have any good ideas how to achieve this? I thought about using dispatchEvent to relay the received touchmove event object directly to the parent document. e.g: document.dispatchEvent(touchmoveevent); But no luck. Perhaps there's a better overall approach. 

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>

推荐答案

这样做的关键是确保在初始化地图时禁用拖动、点击和 scrollWheelZoom.

The key to this was ensuring that dragging, tap and scrollWheelZoom are disabled when intitializing the map.

然后在检测到 2 根手指拖动或使用命令或 ctrl 键滚动时暂时重新启用它们.

Then temporarily re-enabling them when 2 fingered dragging, or scrolling with command or ctrl key is detected.

我现在已将此解决方案打包到传单插件中.

I've now packaged this solution into a leaflet plugin.

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

相关文章