526互联

baidu Map地图遮罩

发布时间 2023-10-13 14:28:47作者: 盼星星盼太阳

一、场景引入

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

二、解决方案

使用 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)
        },

效果：

说明：

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