# leaflet-mask

**Repository Path**: xiaofanger/leaflet-mask

## Basic Information

- **Project Name**: leaflet-mask
- **Description**: leaflet遮罩层插件
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-01-28
- **Last Updated**: 2026-01-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# leaflet-mask

leaflet-mask是一个简单的地图遮罩层控件，继承自L.polygon。我们很多时候希望只显示某块区域内的内容,隐藏或者模糊区域外内容。此插件可以实现传入polygon的latlngs创建对应的遮罩图层。[demo](http://examples.panzhiyue.website/leaflet-mask/example/)

## 示例 

```javascript
//定义地图
var map = L.map('map').setView([37, -69.05], 4);
//添加底图
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);
// 1.单面坐标点
var latlngs1 = [[[37, -109.05], [41, -109.03], [41, -102.05], [41, -100.05], [37, -102.04]]];
var polygon1 = L.polygon(latlngs1, { color: 'red' });
//2.环面坐标
var latlngs2=[
    [[37, -99.05], [41, -99.03], [41, -92.05], [37, -92.04]], // outer ring
    [[37.29, -98.58], [40.71, -98.58], [40.71, -92.50], [37.29, -92.50]] // hole
];
var polygon2 = L.polygon(latlngs2, { color: 'green' });
//3.多面坐标
var latlngs3 = [
    [ // first polygon
        [[37, -69.05], [41, -69.03], [41, -62.05], [37, -62.04]], // outer ring
        [[37.29, -68.58], [40.71, -68.58], [40.71, -62.50], [37.29, -62.50]] // hole
    ],
    [ // second polygon
        [[41, -71.03], [45, -71.04], [45, -64.05], [41, -64.05]]
    ]
];
//创建面
var polygon3 = L.polygon(latlngs3, { color: 'blue' });
//创建遮罩图层并添加到地图
var mask = L.mask({
    showPolygons:[polygon1,polygon2,polygon3],
    color: '#000000',
    fillOpacity:1,
    renderer: L.canvas({ padding: 1 })  //解决遮罩层拖拽与缩放显示不全的Bug
}).addTo(map);
```

## 效果图

![1624260473165](README.assets/1624260473165.png)

## 参数

`isRect:` 是否为矩形遮罩,如果为是,则使用northWest，northEast，sourthEast，sourthWest创建矩形遮罩层外边界,如果为false，则使用传入的坐标数组作为遮罩层外边界

`northWest:` 遮罩层西北角坐标,默认为`{ lat: 180.0, lng: -180.0 }`

`northEast:` 遮罩层东北角坐标,默认为`{ lat: 180.0, lng: 180.0 }`

`sourthEast:` 遮罩层东南角,默认为`{ lat: -180.0, lng: 180.0 }`

`sourthWest:` 遮罩层西南角,默认为`{ lat: -180.0, lng: -180.0 }`

`maskBoundary:` 遮罩层边界坐标,默认为null,

showPolygons:遮罩层中显示的区域