Question

我一直在尝试不同的策略，以滚动方式制作以Leaflet为动力的地图平移，就像在拖动时一样，而不是缩放它。我可以通过更高级别的DOM API，听滚动事件和设置中心来做到这一点，但它感觉不好，也不能与拖动地图的平滑性相提并论。有没有办法通过滚动来移动地图，这会像拖动一样平滑？

Answer 1

您可以调整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/

Answer 2

没有足够的声誉评论，将ghybs的小提琴与我对Rishat评论的解释结合起来：XY scrolling on Leaflet

// 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);

滚动以移动宣传单地图

2 个答案: