传单用鼠标滚轮缩放到一个点

Question

我正在开展一个使用 Leaflet 地图添加新景点的项目。所以应用程序有 2 种模式：

正常，当地图应该照常工作时
添加新的点模式，当它有一个点覆盖（不在地图中心）一直停留在同一个点（已实施）。

在第二种模式下，我需要覆盖滚轮缩放。它应该只缩放到地图上的这个 "new" 点。

我在 Leaflet 中没有找到允许 select 缩放锚点的特定选项。

但我想它是可以实现的，但我还不知道如何实现:-)

这是应用视图的简化架构：

Answer 1

由于您强调要放大的点不在地图容器的中心，您可能已经知道地图 scrollWheelZoom 选项：

Whether the map can be zoomed by using the mouse wheel. If passed 'center', it will zoom to the center of the view regardless of where the mouse was.

因此 'center' 值不完全适合您的情况。

但是您应该能够轻松自定义 Leaflet 如何实现滚轮缩放：

L.Map.ScrollWheelZoom.include({
  _performZoom: function() {
    var map = this._map,
      zoom = map.getZoom(),
      snap = this._map.options.zoomSnap || 0;

    map._stop(); // stop panning and fly animations if any

    // map the delta with a sigmoid function to -4..4 range leaning on -1..1
    var d2 = this._delta / (this._map.options.wheelPxPerZoomLevel * 4),
      d3 = 4 * Math.log(2 / (1 + Math.exp(-Math.abs(d2)))) / Math.LN2,
      d4 = snap ? Math.ceil(d3 / snap) * snap : d3,
      delta = map._limitZoom(zoom + (this._delta > 0 ? d4 : -d4)) - zoom;

    this._delta = 0;
    this._startTime = null;

    if (!delta) {
      return;
    }

    if (map.options.scrollWheelZoom === 'center') {
      console.log(zoom + delta);
      map.setZoom(zoom + delta);

    ////////////////////////////////////////////////////////////////////////
    // Add a case where scrollWheelZoom option is an app specific point.
    } else if (map.options.scrollWheelZoom instanceof L.Point) {
      map.setZoomAround(map.options.scrollWheelZoom, zoom + delta);
    ////////////////////////////////////////////////////////////////////////

    } else {
      map.setZoomAround(this._lastMousePos, zoom + delta);
    }
  }
});


var map = L.map('map', {
  scrollWheelZoom: L.point(150, 100) // x, y
}).setView([48.85, 2.35], 12);

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

#mapWrapper {
  position: relative;
}

#map {
  height: 500px;
}

#pointer {
  z-index: 2000;
  position: absolute;
  top: 100px; /* y */
  left: 150px; /* x */
  width: 5px;
  height: 5px;
  background-color: red;
}

<link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>

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

注意：我猜您还修改了缩放控制按钮的行为。

传单用鼠标滚轮缩放到一个点

Leaflet zoom to a point with mouse wheel

maps

zooming

leaflet