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

Question

我正在开发一个使用Leaflet地图添加新景点的项目。因此该应用程序有两种模式：

1. 常规，地图应照常工作
2. 添加新点模式，当它有一个点叠加（不在地图的中心）时，它始终保持在同一点 （实现）。

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

我在Leaflet中找不到允许选择缩放锚点的特定选项。

但我想它可以实现，但我还没有理解： - ）

以下是应用视图的简化架构：

Answer 1

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

  

是否可以使用鼠标滚轮缩放地图。如果传递'center'，它将缩放到视图的中心，无论鼠标在哪里。

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

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

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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