防止加载多边形外的图块

问题描述

有没有办法防止加载多边形之外的图块?我发现的最接近的例子是这里

Is there a way to prevent tiles from loading that are outside of a polygon? The closest example of this I found is here

http://jsfiddle.net/LsvDk/23/

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);

它可以满足我的需求，只是在平移或缩小时看起来很糟糕，因为它会在多边形之外加载图块.

It does what I want except it looks crappy when panning or zooming out because it loads tiles outside of the polygon.

推荐答案

如果我的理解是正确的，你不喜欢你提到的例子，因为它使用矢量形状(多边形)来隐藏瓷砖，但 Leaflet 必须重新- 平移/缩放时渲染形状，使背景图块暂时出现?

If my understanding is correct, you do not like the example you mention because it uses a vector shape (polygon) to hide the tiles, but Leaflet has to re-render the shape when panning / zooming, which makes the background tiles temporarily appear?

请尝试使用 TileLayer.BoundaryCanvas 插件.它没有使用矢量形状作为蒙版，而是将图块及其蒙版组合到画布中.因此，遮罩变成了光栅图像，这避免了在每次平移/缩放时重新渲染矢量形状的 Leaflet 行为，而是保留以前的图块(在这种情况下与遮罩结合)，直到收到新的图块.

Please have a try with TileLayer.BoundaryCanvas plugin. Instead of using a vector shape as mask, it combines tiles and its mask into a canvas. Hence the mask becomes a raster image, which avoids Leaflet behaviour of vector shape re-rendering at each pan / zoom, but instead keeps previous tiles (combined with mask in this case) until new ones are received.

允许您绘制具有任意多边形边界的切片图层.HTML5 Canvas 用于渲染.

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

The mask is specified as a GeoJSON shape, so it should be as easy to set up as in your example.

原始答案的剩余部分:

您可能会对 Tile Layer 的 bounds 选项感兴趣，以防止在指定区域之外显示任何图块.

You would probably be interested in the bounds option of Tile Layer, to prevent any displaying of tiles outside a specified area.

设置此选项后，TileLayer 仅加载给定地理范围内的图块.

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

However, if your visible area does not perfectly fit with tiles boundaries, you would still have to use a mask to cover some areas, and you might still get the same issue with vector shapes being re-rendered.

这篇关于防止加载多边形外的图块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！