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。它不是将矢量形状用作蒙版，而是将图块及其蒙版组合到画布中。因此，蒙版成为光栅图像，这避免了每次平移/缩放时矢量形状重新渲染的Leaflet行为，而是保留了先前的图块（在这种情况下与蒙版结合），直到收到新的图块。

允许您使用任意多边形边界绘制切片图层。 HTML5 Canvas用于渲染。

蒙版被指定为GeoJSON形状，因此它应该像在示例中一样容易设置。

原始答案的剩余部分：

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

设置此选项后，TileLayer仅加载给定地理范围内的切片。

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

防止多边形外的图块加载

1 个答案: