baidu Map地图遮罩

阅读目录

• 一、场景引入
• 二、解决方案

一、场景引入

做地图轨迹时，轨迹连线不明显，需增加地图遮罩效果

二、解决方案

方案一、使用 Polygon 多边形

定义一个阴影覆盖物，大小覆盖整个地图

代码如下：

// 添加遮罩
        addMask() {
            var maskPoints = []
            var EN_JW = new BMap.Point(180, 90) // 东北角
            var NW_JW = new BMap.Point(-180, 90) // 西北角
            var WS_JW = new BMap.Point(-180, -90) // 西南角
            var SE_JW = new BMap.Point(180, -90) // 东南角
            maskPoints.push(EN_JW)
            maskPoints.push(SE_JW)
            maskPoints.push(WS_JW)
            maskPoints.push(NW_JW)
            this.mask = new BMap.Polygon(maskPoints, {
                strokeColor: 'none',
                strokeOpacity: 1,
                fillColor: '#000', //遮罩颜色
                fillOpacity: 0.3, //遮罩透明度
            })
            this.mask.disableMassClear() //禁止覆盖物在 map.clearOverlays 方法中被清除
            this.map.addOverlay(this.mask)
        },

效果：

说明：

上述是在整个地图添加遮罩，可根据传入的点位，自定义图形，如某区县取消遮罩

 方案二、GroundOverlay图层

　　　　　　  // 西南角和东北角
            var SW = new BMap.Point(-180, -90);
            var NE = new BMap.Point(180, 90);

            const groundOverlayOptions = {
                opacity: 1,
                displayOnMinLevel: 12,
                displayOnMaxLevel: 15
            }
            // 初始化GroundOverlay
            this.mask = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);
            // 设置GroundOverlay的图片地址     
            this.mask.setImageURL(require('./mask.png'));
            
            this.map.addOverlay(this.mask)
            this.mask.addEventListener('click', (e)=>{
            })

方案三、TileLayer自定义图层

　　　　　　  this.mask = new BMap.TileLayer();         // 创建地图层实例    
            this.mask.getTilesUrl=function(){             // 设置图块路径     
                return require('./mask.png');      
            };      
            this.map.addTileLayer(this.mask);  

清除图层需使用 removeTileLayer 方法

this.map.removeTileLayer(this.mask);