Question

要使用noWrap=true选项阻止最高缩放级别的多个重复世界地图。它工作得很好，但只在地图的左侧（灰色区域），右侧仍显示额外的瓷砖。那是为什么？

UPDATE1：看起来这是特定Mapbox磁贴或加载方式的问题？这里noWrap和https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png

但是一旦我改用另一种使用样式加载瓷砖的方法

我可以向右滚动并仍然可以获得瓷砖

我打开了一个github问题，我怀疑它是该库的一个错误 https://github.com/Leaflet/Leaflet/issues/5938

Answer 1

这是某些Mapbox样式的问题，并且＆＃34;不完整＆＃34;在您的代码中使用noWrap选项:(强调我的）

noWrap：图层是否缠绕在反子弹上。如果true，则GridLayer仅在低缩放级别显示一次。当地图CRS没有环绕时没有效果。 可与bounds结合使用，以防止请求超出CRS限制的图块。

noWrap告诉Leaflet不要复制＆＃34; main＆＃34;世界。因此，Leaflet必须假设＆＃34;主要＆＃34;世界是＆＃34;无限＆＃34;，它试图在任何地方加载图块，扩展四叉树方案：与图块0/0/0（在缩放0处）一起，它尝试加载图块0/0 / 0,0 / -1/0等等。
由于某种原因，一些Mapbox样式返回正常四叉树方案之外的图块的图像：除了tile 0/0/0，您还可以获得0/0 / 0,0 / 0/0等图像。在你的情况下，那些＆＃34;想象的＆＃34;瓷砖总是相同的图形，重复世界。因此，看起来Leaflet仍然包裹瓷砖，而实际上它显示不同的图像;它是Mapbox平铺服务器，在所有这些图像中提供相同的图形。

如果您想告诉Leaflet不要扩展四叉树方案，您应该指定在＆＃34; main＆＃34;之外没有可用的图块。世界。

因此，解决方案只是将Tile Layer bounds选项与noWrap选项结合使用：

L.tileLayer(urlTemplate, {
  noWrap: true,
  bounds: [
    [-90, -180],
    [90, 180]
  ]
}).addTo(map);

Answer 2

归功于ghybs的答案，但您可以在地图图层中设置 maxBounds 而不是TileLayer。此外，TileLayer上不再需要 noWrap 。只需将maxBounds=[-90, -180],[90, 180]]应用于您的地图图层，就可以正常使用。