# leaflet-ImageMask

**Repository Path**: csl125/leaflet-ImageMask

## Basic Information

- **Project Name**: leaflet-ImageMask
- **Description**: leaflet图片覆盖物
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-12-27
- **Last Updated**: 2024-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# leaflet-imageMask

leaflet-imageMask是一个图片遮罩层控件，继承自L.ImageOverlay。我们很多时候希望只显示某块区域内的内容,隐藏或者模糊区域外内容。现在网上能找到的代码都是纯色遮罩,不是特别好看。此控件实现了使用指定图片填充遮罩部分内容。  [demo](http://examples.panzhiyue.website/leaflet-imageMask/example/index.html)

## 示例 

```javascript
        window.onload = function () {
            var map = L.map("map",{crs:L.CRS.EPSG4326});
            map.setView([30.46337852800008, 120.967045726], 6);

            L.tileLayer('http://t4.tianditu.gov.cn/vec_c/wmts?tk=6dfd31e3b55a8466f34997aee5551a9c&layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
                name: "中国天地图影像",
                maxZoom: 20,
                tileSize: 256,
                zoomOffset: 1
            }).addTo(map);

            L.tileLayer('http://t2.tianditu.gov.cn/cva_c/wmts?tk=6dfd31e3b55a8466f34997aee5551a9c&layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
                name: "中国天地图影像标注",
                maxZoom: 20,
                tileSize: 256,
                zoomOffset: 1
            }).addTo(map);

            $.ajax({
                url: "../resources/json/ZJ_quxian_RH.json",
                success: function (data) {
                    //添加GeoJSON数据，在地图中显示
                    var geojson = L.geoJSON(data);
                    var maskLayer = L.imageMask('../resources/images/bjt.jpg', {
                        padding: 1,
                        polygons: geojson.getLayers(),
                        mode:"clip"  //clip:指定区域不显示背景图,show:指定区域显示背景图
                    }).addTo(map);
                    //地图移动时刷新覆盖层,可以实现背景图片始终不变
                    map.on("move",function(){
                        maskLayer.refresh();
                    });
                }
            });
        }
```

## 效果图

clip:

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

show:

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





## 构造函数

```javascript
L.imageMask(<String> imageUrl, <ImageMask options> options?)
```



**url:**图片资源路径

**options:**

- **polygons(Array<L.Polygon>)**:面集合,用于表示显示背景图或者不显示背景图的区域
- **mode(string)**:显示模式:clip:polygons表示的区域不显示背景图,show:polygons表示的区域显示背景图
- **padding(number)**:围绕地图视图（相对于其大小）扩展剪辑区域多少，例如 0.1 将是每个方向地图视图的 10%

## 方法

| 名称          | 返回值           | 描述         |
| ------------- | ---------------- | ------------ |
| getMode()     | string           | 获取显示模式 |
| getPolygons() | Array<L.Polygon> | 获取面集合   |
| setMode()     | this             | 设置显示模式 |
| setPolygons() | this             | 设置面集合   |
| refresh       | this             | 刷新         |