Leaflet: How can i show layer only inside a polygon

问题

Actually i'm working with Leaflet but when i add a leaftlet.webglheatmap layer it uses the entire screen...

I need to show only the data (colour) inside a geoJson polygon, instead of all the map:

I talked with the webglheatmap developer but he told me to create a new shape with webgl, but that is not an option in this minute

I tried Leaflet.Snogylop too, but it just draw a shape outside my map and with some colours it doesnt do the effect.

Thanks in advice

回答1:

If I am interpreting your question correctly, you need to show map layer only within Polygon. Unfortunately it's not straight forward with leaflet. I stumbled with same issue an year ago and I ended up using Leaflet Snogylop Plugin. Simply put by the author:

Leaflet.snogylop is a Leaflet plugin that inverts polygons.

Basically you define a polygon where you want to show the map, this plugin will invert that polygon so that rest of map is covered while your desired area is transparent.

Inverted Polygon

Inversted MultiPolygon

Usage Include the lib in your page after leaflet, then use it by simply defining the invert option to true

L.geoJson(data, {
    invert: true
}).addTo(map);

来源：https://stackoverflow.com/questions/65676884/leaflet-how-can-i-show-layer-only-inside-a-polygon