Leaflet.Mask is a Leaflet plugin that loading polygons from geojson to masking the rest of the map.
Check out the demo.
varmap=L.map("map",{center: [29,120],zoom: 8});L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);L.mask('bound.json',{}).addTo(map);L.mask(geosjon,options?)| Parameter | Type | Description |
|---|---|---|
| geosjon | String|Object | .geojson URL or GeoJSON object |
| options | Object | Layer options |
| Option | Type | Default | Description |
|---|---|---|---|
| interactive | Boolean | false | If false, the mask layer will not emit mouse events and will act as a part of the underlying map. |
| fitBounds | Boolean | true | If true, the map fits the maximum zoom level to the given geographical bounds. |
| restrictBounds | Boolean | true | If true, the map restricts the view to the given geographical bounds, bouncing the user back if the user tries to pan outside the view. |
| Option | Type | Default | Description |
|---|---|---|---|
| stroke | Boolean | true | Whether to draw stroke along the path. Set it to false to disable borders on polygons or circles. |
| color | String | '#3388ff' | Stroke color |
| weight | Number | 2 | Stroke width in pixels |
| opacity | Number | 1.0 | Stroke opacity |
| lineCap | String | 'round' | A string that defines shape to be used at the end of the stroke. |
| lineJoin | String | 'round' | A string that defines shape to be used at the corners of the stroke. |
| dashArray | String | null | A string that defines the stroke dash pattern. Doesn't work on Canvas-powered layers in some old browsers. |
| dashOffset | String | null | A string that defines the distance into the dash pattern to start the dash. Doesn't work on Canvas-powered layers in some old browsers. |
| fill | Boolean | depends | Whether to fill the path with color. Set it to false to disable filling on polygons or circles. |
| fillColor | String | '#FFFFFF' | Fill color. |
| fillOpacity | Number | 1.0 | Fill opacity. |
| fillRule | String | 'evenodd' | A string that defines how the inside of a shape is determined. |