Leaflet.js：使用 ctrl + 滚动缩放地图并在移动设备上用两根手指移动地图

Question

我正在使用http://leafletjs.com/ ...是否可以：

1. 使用 ctrl + 滚动缩放地图

2. 在手机/​​平板电脑上用两根手指移动地图

...谷歌地图的功能如此相似？随着 cmets ...

到目前为止，这就是我的设置：

// Leaflet Maps
var contactmap = L.map('contact-map', {
        center: [41.3947688, 2.0787279], 
        zoom: 15,
        scrollWheelZoom: false
    });

Answer 1

有一个很棒的库可以做到这一点。 Leaflet.GestureHandling

它是传单的附加组件，可以直接使用，它也是模块化的，可以使用 npm 安装。

这是一个使用传单和 GestureHandling 的工作示例。 您也可以在移动设备上试用。

附：它有多种语言:)

// Attach it as a handler to the map

const map = L.map('map', {
  gestureHandling: true
}).setView([51.505, -0.09], 13);

// Add tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

    #map {
      height: 400px;
      width: 400px;
    }

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin=""/>
  <link rel="stylesheet" href="//unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css"
        type="text/css">
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
          integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
          crossorigin=""></script>
  <script src="//unpkg.com/leaflet-gesture-handling"></script>
  
  
  
  <div id="map"></div>

Answer 2

使用 ctrl + zoom 缩放地图。我以自定义方式做了。 html代码如下

<div id="map"></div>

css

.map-scroll:before {
content: 'Use ctrl + scroll to zoom the map';
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
font-size: 34px;
 }
 .map-scroll:after {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
content: '';
background: #00000061;
z-index: 999;
}

jQuery

  //disable default scroll 
  map.scrollWheelZoom.disable();

  $("#map").bind('mousewheel DOMMouseScroll', function (event) {
    event.stopPropagation();
     if (event.ctrlKey == true) {
             event.preventDefault();
         map.scrollWheelZoom.enable();
           $('#map').removeClass('map-scroll');
         setTimeout(function(){
             map.scrollWheelZoom.disable();
         }, 1000);
     } else {
         map.scrollWheelZoom.disable();
         $('#map').addClass('map-scroll');
     }

 });

  $(window).bind('mousewheel DOMMouseScroll', function (event) {
       $('#map').removeClass('map-scroll');
  })

以简单的方式，当用户在地图上滚动然后检测 ctrl 按钮是否被按下，然后我只需添加一个将在地图上显示消息的类。并防止屏幕放大和缩小地图之外。

Answer 3

我设法解决了你的第二个问题。

我使用 css 通过 ::after 伪选择器显示消息。

#map { 
  &.swiping::after {
    content: 'Use two fingers to move the map';
  }
}

还有 javascript 来捕捉触摸事件。

mapEl.addEventListener("touchstart", onTwoFingerDrag);
mapEl.addEventListener("touchend", onTwoFingerDrag);

function onTwoFingerDrag (e) {
  if (e.type === 'touchstart' && e.touches.length === 1) {
    e.currentTarget.classList.add('swiping')
  } else {
    e.currentTarget.classList.remove('swiping')
  }
}

它检查类型是否为触摸事件，如果您使用的是 1 根手指，则将类添加到带有消息的地图中。如果您使用超过一根手指，则会删除该类。

Working demo我建议你使用移动设备。

Code pen from the demo