仅限制向北/向南平移的地图框

  • 本文关键字:地图 向北 leaflet mapbox
  • 更新时间 :
  • 英文 :


>有人知道如何仅使用北/南边界来约束 Mapbox 地图中的平移吗?我想做的是使用世界副本,以便用户可以连续从东向西平移,但限制南北平移,以便您无法在地图图块之外平移(我觉得这非常烦人)。我目前在初始化地图时使用最大边界以防止平移到极点上方和下方的白色瓷砖,但这不适用于世界复制。

您可以在用于

设置maxBounds选项的L.LatLngBounds中使用-Infinity西和Infinity东(thnx Ivan):(在代码片段中使用传单,但也应该适用于Mapbox.js)

var map = new L.Map('leaflet', {
    'center': [0, 0],
    'zoom': 2,
    'worldCopyJump': true,
    'layers': [
        new L.TileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
            'attribution': '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
        }),
        new L.Marker([0,0])
    ],
    'maxBounds': [
        [-90, -Infinity],
        [90, Infinity]
    ]
});
body {
    margin: 0;
}
html, body, #leaflet {
    height: 100%;
}
<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  </head>
  <body>
    <div id="leaflet"></div>
    <script type="application/javascript" src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  </body>
</html>

最新更新