Restrict the viewable part of a tile to a polygon area in Leaflet?

问题

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.

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

回答1:

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

For restricting the map 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 

When you want to revert this:

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

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

EDIT:

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

回答2:

Late reply, but for others looking, the Leaflet Boundary Canvas layer may do what you need. You can pass it a polygon or multipolygon, and it will obscure all other areas of the map.

来源：https://stackoverflow.com/questions/21456115/restrict-the-viewable-part-of-a-tile-to-a-polygon-area-in-leaflet