单击鼠标滚轮缩放到一个点

我正在使用Leaflet地图添加新地点的项目。因此，应用程序有2种模式：单击鼠标滚轮缩放到一个点

定期，当图应该像往常一样工作
添加新的点模式，当它有一个点覆盖（未在图中央），这也保持相同的一直指向（已实施）。

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

我在Leaflet中没有找到具体的选项，允许选择缩放定位点。

但我想这是可以实现的，但我不明白怎么还没有:-)

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

来源

2017-10-13 Nikolay Aleshkovskiy

既然你强调了事实上，您要在不放大地图容器中心的时候，你可能已经知道地图scrollWheelZoom选项：

磨她的地图可以通过使用鼠标滚轮放大。如果通过'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/[email protected]/dist/leaflet.css" rel="stylesheet"/> 
 
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script> 
 

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

注：我猜你也修改缩放控制按钮的行为。

来源

2017-10-13 08:20:41 ghybs

ghybs非常感谢你！我还没有测试过，但它看起来完全是我所需要的。 –

单击鼠标滚轮缩放到一个点

回答

相关问题