滚动移动传单地图

Scroll to move Leaflet map

本文关键字：地图 单地图 移动 滚动      更新时间：2023-09-26

我一直在尝试不同的策略来制作一个由leaf驱动的地图平移，以与拖动相同的方式滚动，而不是缩放它。我可以通过更高级的DOM API来做到这一点，监听滚动事件和设置中心，但感觉不太好，也无法与拖动地图的流畅性相比。有没有一种方法可以通过滚动来移动地图，让它感觉像拖动一样平滑?

您可以调整L.Map.ScrollWheelZoom处理程序来执行地图平移而不是缩放。

L.Map.ScrollWheelPan = L.Map.ScrollWheelZoom.extend({
  _performZoom: function() {
    var map = this._map,
      delta = this._delta;
    map.stop(); // stop panning and fly animations if any
    delta = delta > 0 ? Math.ceil(delta) : Math.floor(delta);
    delta = Math.max(Math.min(delta, 4), -4);
    this._delta = 0;
    this._startTime = null;
    if (!delta) {
      return;
    }
    map.panBy([0, -delta * 40]); // Adjust 40 to your feeling.
  }
});
L.Map.addInitHook('addHandler', 'scrollWheelPan', L.Map.ScrollWheelPan);
var map = L.map("map", {
  scrollWheelZoom: false,
  scrollWheelPan: true
});

演示:https://jsfiddle.net/3v7hd2vx/67/

没有足够的声誉来评论，制作了ghybs's fiddle的衍生品，结合我对Rishat评论的理解:XY滚动传单

// based on https://stackoverflow.com/questions/38898519/scroll-to-move-leaflet-map
let m = document.querySelectorAll('#map')[0];
L.DomEvent.on(m, 'wheel', function(e) {
  let x = e.deltaX;
  let y = e.deltaY;
  map.stop();
  map.panBy([x, y]);
})
L.Map.ScrollWheelPan = L.Map.ScrollWheelZoom.extend({
  _performZoom: function() {}
});
L.Map.addInitHook('addHandler', 'scrollWheelPan', L.Map.ScrollWheelPan);
var map = L.map("map", {
  scrollWheelZoom: false,
  scrollWheelPan: true
});
L.tileLayer("//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg").addTo(map);
map.setView([48.85, 2.35], 3);
相关文章：