防止加载多边形外的图块 [英] Prevent tiles outside of polygon from loading

问题描述

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

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 用于渲染.

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

掩码被指定为 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 仅加载给定地理范围内的图块.

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

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

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.

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