リーフレットはマウスホイールでポイントまでズームします

Question

リーフレットマップを使用して新しいスポットを追加するプロジェクトに取り組んでいます。マップは

いつものように動作する必要がある場合、それは同じのままドットオーバーレイ（ないマップの中央にある）を有する場合には、新しいポイントモードを追加し、

1. 正規：だからアプリは2つのモードがありますいつもポイント （実装されている）。

第2のモードでは、スクロールホイールのズームを無効にする必要があります。マップ上のこの「新しい」点にのみズームする必要があります。

ズームアンカーポイントを選択できる特別なオプションはありません。

しかし、私はそれを実装することが可能だと仮定し、私はここで:-)

アプリのビューの単純化されたスキーマであるか、まだ理解していない：

Answer 1

あなたが出て強調しているので地図コンテナの中心ではなくズームインしたい点がある場合は、既に地図scrollWheelZoomのオプションを知っている可能性があります。

Whet彼女はマウスホイールを使って地図を拡大することができます。 'center'が渡された場合、マウスの位置に関係なくビューの中央にズームされます。

したがって、'center'の値は、あなたのケースに正確に適合しません。

しかし、あなたは簡単にリーフレットは、スクロールホイールのズームを実装する方法をカスタマイズすることができるはずです。

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>

注：私はあなたにもズームコントロールボタンの動作を変更していると思います。