maps - 使用鼠标滚轮将传单缩放到一个点

Question

我正在开发一个项目，该项目使用传单 map 来添加新地点。所以该应用程序有 2 种模式:

1. 常规，本地图应正常工作时
2. 添加新的点模式，当它具有始终保持在同一点的点覆盖(不在 map 中心)时 (已实现)。

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

我在Leaflet中没有发现允许选择缩放 anchor 的特定选项。

但我认为可以实现，但我还不明白如何实现:-)

这是应用程序 View 的简化架构:

Answer 1

由于您强调要放大的点不在 map 容器的中心，因此您可能已经知道 map 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f498919592989180b4c5dac6dac4" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e08c8581868c8594a0d1ced2ced0" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet-src.js"></script>

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

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