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

Question

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

1. 使用ctrl + scroll缩放地图

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

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

到目前为止,这是我的设置:

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

Answer 1

有一个很棒的库可以做到这一点。传单，手势处理

它是随手可得的传单的附加内容，也是模块化的，可以使用npm安装。

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

PS它有多种语言：）

// 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')
  }
}

它检查类型是否为touchevent,如果您使用1个手指,如果是,则将该类添加到带有消息的地图中.如果您使用多个手指,则会删除该课程.

工作演示我建议你使用移动设备.

来自演示的代码笔