@panzhiyue/leaflet-imagemask

leaflet-imageMask

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

示例

        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:

show:

构造函数

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	刷新