tilelayer 上的 noWrap 选项仅部分起作用

Question

为了防止在最高缩放级别出现多个重复的世界地图，我使用

noWrap=true

选项。它运行良好，但仅在地图的左侧（灰色区域），右侧仍然显示额外的图块。 这是为什么？

UPDATE1：看起来这是特定 Mapbox 图块或其加载方式的问题？ 这里没有包裹和

https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png

工作完美：NoWrap 工作 JSBIN 链接

但是一旦我更改为使用样式加载图块的另一种方式

NoWrap 损坏的 JSBIN 链接

我可以向右滚动并仍然获得图块

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

Answer 1

这是某些 Mapbox 样式的问题以及代码中

noWrap

选项的“不完整”使用：（强调我的）

noWrap

：图层是否包裹在反子午线上。如果

true

，则 GridLayer 将仅在低缩放级别显示一次。当地图 CRS 不环绕时无效。 可与

bounds

结合使用，以防止请求超出 CRS 限制的图块。

• noWrap

  ，正如它的名字所说，告诉Leaflet不要复制“主”世界。因此，Leaflet 必须假设“主”世界是“无限”，并且它尝试在任何地方加载图块，从而扩展四叉树方案：在图块 0/0/0 旁边（在缩放 0 处），它尝试加载图块 0/ 1/0、0/-1/0 等
• 由于某种原因，某些 Mapbox 样式会返回正常四叉树方案之外的图块图像：除了图块 0/0/0 之外，您还可以获得 0/1/0、0/2/0 等的图像。在这种情况下，那些“想象的”瓷砖总是相同的图形，重复着世界。因此，看起来Leaflet仍然包裹着图块，但实际上它显示了不同的图像；它是 Mapbox 平铺服务器，在所有这些图像中提供相同的图形。

如果你想告诉 Leaflet 不要扩展四叉树方案，你应该指定“主”世界之外没有可用的图块。

因此，解决方案就是简单地将平铺层

bounds

选项与

noWrap

选项结合使用：

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

更新了 JS Bin：http://jsbin.com/nokasukozo/1/edit?html,js,console,output

Answer 2

归功于ghybs的回答，但是您可以在地图图层而不是TileLayer中设置maxBounds。此外，TileLayer 上不再需要 noWrap。只需将

maxBounds=[-90, -180],[90, 180]]

应用到您的地图图层即可正常工作。

Answer 3

如果使用 GridLayer：

    var tiles = new L.GridLayer({
        noWrap: true,
        bounds: [
            [-90, -180],
            [90, 180]
        ]
    });

    tiles.createTile = function (coords) {
        var canvas = L.DomUtil.create('canvas', 'leaflet-tile');
        var image = new Image();
        ...
        return canvas;
    }

    tiles.addTo(map)