防止多边形外的瓷砖加载 [英] 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);

它可以做我想要的，除了在平移或缩小时看起来很cr脚之外，因为它会在多边形外部加载图块.

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插件.它没有使用矢量形状作为蒙版，而是将图块及其蒙版组合到画布中.因此，遮罩变成了光栅图像，避免了在每次平移/缩放时重新呈现矢量形状的小叶行为，而是保留了以前的图块(在这种情况下与蒙版组合)，直到接收到新的图块为止.

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.

保留原始答案:

您可能会对平铺图层"的 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屋！