# Leaflet.Mask

**Repository Path**: ptma/Leaflet.Mask

## Basic Information

- **Project Name**: Leaflet.Mask
- **Description**: 从 geojson 加载多边形数据并遮盖地图的其余部分
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 16
- **Forks**: 4
- **Created**: 2020-09-10
- **Last Updated**: 2025-08-27

## Categories & Tags

**Categories**: gis

**Tags**: None

## README

# Leaflet.Mask 

Leaflet.Mask is a Leaflet plugin that loading polygons from geojson to masking the rest of the map.  

Check out the [demo](https://ptma.github.io/Leaflet.Mask/examples/mask.html).

![Preview](https://ptma.github.io/Leaflet.Mask/examples/preview.png)

## Useage example
```javascript
var map = L.map("map", {
    center: [29, 120],
    zoom: 8
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.mask('bound.json', {}).addTo(map);
```

## Creation 

```javascript
L.mask(geosjon, options?)
```
| Parameter | Type | Description |
|-----------|------|-------------|
| geosjon | String\|Object | .geojson URL or GeoJSON object |
| options | Object | Layer options |


## 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. |
### Options inherited from L.Path
| 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. |