百度地图API 实现区域反遮罩,包括河北等特殊区域

效果图:
在这里插入图片描述
描述:
项目中要实现区域的反遮罩,网上很多办法,只能适配部分单区域的省市边界(或者有很多bug),如图河北省包含有个内部的子区域,就会出错,下面给大家分享下我的解决办法,亲测有效:

  	  var bdary = new BMap.Boundary();
      let city = '河北'
      //反遮罩
      bdary.get(city, function (rs) {//获取行政区域
        const count = rs.boundaries.length;
        if (count === 0) {
          return;
        }
        // map.clearOverlays();        //清除地图覆盖物
        let locPoints = rs.boundaries[0];
        // //!!!这个主要解决有些区域遮罩层不全问题
        let index = 0
        rs.boundaries.forEach((item, i) => {
          if (item.split(";").length > locPoints.split(";").length) {
            locPoints = item;
            index = i
          }
        })
        //多边形的坐标点数组(点最多的)
        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: 3, 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)
        const mask = new BMap.Polygon(plyPoints, {
          strokeColor: 'none',
          fillColor: '#069DED',
          strokeOpacity: 1,
          fillOpacity: 0.2
        })
        mask.disableMassClear()
        map.addOverlay(mask);
        //给其他点集合外部添加边框和填充色
        rs.boundaries.forEach((item, i) => {
          if (i !== index) {
            var ply1 = new BMap.Polygon(item, { strokeWeight: 3, strokeColor: "#069DED", fillColor: "#fff", fillOpacity: "0.5" });
            map.addOverlay(ply1);
          }
        })
        map.setViewport(polygon.getPath());//调整视野  这里需要注意, 调整为ply1(即河北外部)的视野, 这样河北省才会充满屏幕,
      });

注意:在这里插入图片描述
这里是处理问题核心,目的是找的多个区域点最多(也就是区域最大的)当做主区域添加反遮罩,其他区域则添加遮罩;
在这里插入图片描述
这样会有一个问题,就是其他区域,会出现遮罩背景,对效果有一定影响,这里欢迎大家给出更好解决办法…

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值