防止加载多边形外的图块

Question

有没有办法阻止加载多边形之外的图块？我找到的最接近的例子在这里

var polygon = L.multiPolygon(
[
[
  [
    [51.509, -0.08],
    [51.503, -0.08],
    [51.503, -0.047],
    [51.51, -0.047],
  ],
  [
    [84.774798, -176.835937],
    [-85.221998, -175.078125],
    [-85.103422, 176.484375],
    [84.3916, 178.242188]
  ]
]
], {
    color: '#DBDBDB',
weight: 1,
opacity: 1,
fillOpacity: 1
}).addTo(map);

除了在平移或缩小时看起来很糟糕之外，它可以满足我的要求，因为它会加载多边形外部的图块。

Answer 1

如果我的理解是正确的，你不喜欢你提到的例子，因为它使用矢量形状（多边形）来隐藏瓦片，但是 Leaflet 在平移/缩放时必须重新渲染形状，这使得暂时出现背景图块？

编辑：

请尝试TileLayer.BoundaryCanvas plugin。它不是使用矢量形状作为蒙版，而是将图块及其蒙版组合成 canvas。因此，蒙版变成了光栅图像，这避免了 Leaflet 在每次平移/缩放时重新渲染矢量形状的行为，而是保留以前的图块（在这种情况下与蒙版结合），直到收到新的图块。

Allows you to draw tile layers with arbitrary polygonal boundary. HTML5 Canvas is used for rendering.

掩码被指定为 GeoJSON 形状，因此它应该像您的示例中一样容易设置。

原始答案的剩余部分：

您可能会对 bounds option of Tile Layer 感兴趣，以防止在指定区域外显示任何图块。

When this option is set, the TileLayer only loads tiles that are in the given geographical bounds.

但是，如果您的可见区域与图块边界不完全吻合，您仍然需要使用遮罩来覆盖某些区域，并且您可能仍然会遇到与重新渲染矢量形状相同的问题。

防止加载多边形外的图块

Prevent tiles outside of polygon from loading

leaflet