百度地图 行政区域高亮显示

>本文转载至网络: 原文地址:https://blog.youkuaiyun.com/duan1311/article/details/81381278

function getBoundary(){       
        //百度地图获取行政区域的对象
        var bdary = new BMap.Boundary();
   
       bdary.get("重庆", function (rs) {       //获取行政区域
           
           //以下是获取行政区域的回调
        map.clearOverlays();        //清除地图覆盖物         
 
         //需要绘制边界多边形的点集合
         var paths = new Array();
         //行政区域点集合,以;分隔的
      var pointliststr = rs.boundaries[0];
      //3获取点数组,push到 paths中
        var pointlist = pointliststr.split(";");
        var firstPoint;
          for(var i =0;i<pointlist.length;i++)
          {
                  
              var tempPt = pointlist[i].split(',');
              var newPoint = new BMap.Point(tempPt[0],tempPt[1]);
              if(i==0){ firstPoint= newPoint;};
          
            paths.push(newPoint);
        }
          //第一点再推进去,形成一个闭环,构造了多边形的内环
        paths.push(firstPoint);
        
        //自定义的八个便捷点,从东开始逆时针,东,东北,北,西北,西,西南,南,东南(必须按顺序来)
              paths.push(new BMap.Point(170.672126, 39.623555));
            paths.push(new BMap.Point(170.672126, 81.291804));
            paths.push(new BMap.Point(105.913641, 81.291804));
            paths.push(new BMap.Point(-169.604276,  81.291804));
            paths.push(new BMap.Point(-169.604276, 39.623555));
            paths.push(new BMap.Point(-169.604276, -68.045308));
            paths.push(new BMap.Point(105.913641, -68.045308));
            paths.push(new BMap.Point(170.672126, -68.045308));
              paths.push(new BMap.Point(170.672126, 39.623555));
        
        //4绘制第一个多边形,覆盖住除行政区外的所有部分,fillColor:填充色,strokeColor:边界颜色(设置透明,否则会有其他线条),strokeOpacity:线条透明,fillOpacity:填充物透明。
          var ply1 = new BMap.Polygon("",
           { fillColor: "#708090", strokeColor: "transparent", strokeOpacity:0,fillOpacity:0}); //建立多边形覆盖物
           //将之前形成的点set到多边形对象中
           ply1.setPath(paths);
           //在地图上添加第一个多边形
           map.addOverlay(ply1);  //遮罩物是半透明的,如果需要纯色可以多添加几层


            //5. 给目标行政区划添加边框,其实就是给目标行政区划添加一个没有填充物的遮罩层,绘制出边界线
            var ply = new BMap.Polygon(rs.boundaries[0],
            { strokeWeight: 2, strokeColor: "#ff0000",fillColor: "transparent" });
                map.addOverlay(ply);   
                map.setViewport(ply.getPath());    //调整视野                 
            });
        }

        setTimeout(function(){
            getBoundary();            
        }, 200);

上面的代码可以直接放到百度地图API示例中运行,效果图:
在这里插入图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值