将图块的可见部分限制在单页中的多边形区域？ [英] Restrict the viewable part of a tile to a polygon area in Leaflet?

问题描述

在小册子中，如何将图块的可见部分限制在多边形（或geojson）中所包含的区域，即多边形和下方的图块之间的交点。

In Leaflet, how does one restrict the viewable part of a tile to the area contained within a polygon (or geojson), i.e., the intersection between a polygon and the tile beneath.

示例使用：只显示一个国家/地区，并隐藏所有其他国家。

Example use: display only one country and hide all others.

编辑：我不是在寻找fitBounds / setMaxBounds方法，但只能显示一个多边形的内部区域。

I'm not looking for the fitBounds/setMaxBounds method but for a way to display only the inner area of a polygon.

推荐答案

您可以使用 map.setMaxBounds（L.latLngBounds）限制视图的方法。

You can use the map.setMaxBounds(L.latLngBounds) method to restrict the view.

限制地图视图：

map.fitBounds(polygon.getBounds()); // max zoom to see whole polygon
map.setMaxBounds(polygon.getBounds()); // restrict map view to polygon bounds
map.options.minZoom = map.getZoom(); // restrict user to zoom out 

当您想要恢复时：

delete map.options.maxBounds;  // remove the maxBounds object from the map options
map.options.minZoom = 0; // set min-zoom to 0 = no restriciton

我已经设置了一个jsfiddle，你可以看到行为： jsfiddle

I have setup a jsfiddle where you can see the behaviour: jsfiddle

编辑：

我已经更新了jsfiddle以使用多边形，并隐藏除了这个三角形之外的所有世界。唯一的问题是，在缩放过程中，您仍然可以看到地图的其他部分。
jsfiddle2

I have updated the jsfiddle to use a multipolygon and hide all of the world except this triangle. The only problem is that during zoom you can still see other parts of the map. jsfiddle2

这篇关于将图块的可见部分限制在单页中的多边形区域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！