百度地图 实现指定区域外添加遮罩效果 适用全省市

项目需求

隐藏或给湖北省以外区域加遮罩，尝试网上各种教程，发现画出的湖北省区域并不完整（只有很小一块）。
参考链接

原因分析

湖北省rs.boundaries.length>1，而普通省市（如北京市）rs.boundaries.length=1，网上绝大部分教程针对单块区域取值rs.boundaries[0]，带来问题

//上述图片代码中，湖北省rs.boundaries.length>1
        var strs = new Array();
        strs = rs.boundaries[0].split(";");//！！！！这里只适用于rs.boundaries.length=1的省市（如北京等）
        var ENWS = "";
        for (var i=0;i<strs.length;i++) {
            ENWS += strs[i] + ";"
        }
        //2.自定义外围边框点的集合
        var E_JW = "170.672126, 39.623555;";        //东
        var EN_JW = "170.672126, 81.291804;";       //东北角
        var N_JW = "105.913641, 81.291804;";        //北
        var NW_JW = "-169.604276,  81.291804;";     //西北角
        var W_JW = "-169.604276, 38.244136;";       //西
        var WS_JW = "-169.604276, -68.045308;";     //西南角
        var S_JW = "114.15563, -68.045308;";        //南
        var SE_JW = "170.672126, -68.045308 ;";     //东南角
        //3.添加环形遮罩层
        var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {
        strokeColor:"none",strokeOpacity:0,fillColor:"#fff",fillOpacity:"0.8"
        }); //建立多边形覆盖物
        map.addOverlay(ply1);//遮罩物是半透明的，如果需要纯色可以多添加几层
        //4. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
        var ply = new BMap.Polygon(rs.boundaries[0], {strokeWeight:3,strokeColor:"#114bf3",fillColor:""});
        map.addOverlay(ply);

解决办法

<baidu-map
        :scrollWheelZoom="false"
        center="湖北"
        :zoom="8"
        class="baidumap"
        :enableDragging="false"
        @ready="handler"
        @click="mapClick"
    >
    </baidu-map>

handler({BMap, map}) {
		//	!!!这里解决BMap报undefined
      this.BMap = BMap;
      this.map = map
      this.getBoundary('湖北省')
    },
    //指定省市进行描边处理，省市外进行半透明遮盖。
    getBoundary(city) {
      const {BMap, map} = this;
      const bdary = new BMap.Boundary();
      bdary.get(city, function (rs) {//获取行政区域
        console.log('rs.boundaries', rs.boundaries)
        const count = rs.boundaries.length;
        if (count === 0) {
          return;
        }
        map.clearOverlays();        //清除地图覆盖物
        let locPoints = rs.boundaries[0];
        //!!!这个主要解决有些区域遮罩层不全问题
        rs.boundaries.forEach((item) => {
          if (item.split(";").length > locPoints.length) {
            locPoints = item;
          }
        })
        //多边形的坐标点数组
        let plyPoints = [];
        locPoints.split(';').map(item => {
          item = item.split(',');
          plyPoints.push(new BMap.Point(item[0], item[1]));
        })
        //!!!!这里注释掉的是画边界线的
        // const polygon = new BMap.Polygon(plyPoints, {strokeColor: '#069DED', strokeWeight: 4, strokeOpacity: 0, fillColor: '', fillOpacity: 0})
        // polygon.disableMassClear()
        // map.addOverlay(polygon);
        const EN_JW = new BMap.Point(180, 90) // 东北角
        const NW_JW = new BMap.Point(-180, 90) // 西北角
        const WS_JW = new BMap.Point(-180, -90) // 西南角
        const SE_JW = new BMap.Point(180, -90) // 东南角
        // 添加环形遮罩层
        if (plyPoints.length > 0) {
          plyPoints.push(plyPoints[0])
        }
        plyPoints.push(EN_JW)
        plyPoints.push(SE_JW)
        plyPoints.push(WS_JW)
        plyPoints.push(NW_JW)
        plyPoints.push(EN_JW)
        console.log('plyPoints', plyPoints)
        const mask = new BMap.Polygon(plyPoints, {
          strokeColor: 'none',
          fillColor: '#0d131e',
          strokeOpacity: 1,
          fillOpacity: 0.85
        })
        mask.disableMassClear()
        map.addOverlay(mask);
      });
    },

效果