百度地图 圈出省份轮廓图并高亮

//描绘省份轮廓线
    addSCBorder:function () {
        var blist = [];

        /**
         * 添加行政区划
         * @param {} districtName 行政区划名
         * @returns  无返回值
         */
        function addDistrict(districtName) {
            var me = this;
            //使用计数器来控制加载过程
            //使用百度接口加载边界经纬度数据
            var bdary = new BMap.Boundary();
            bdary.get(districtName, function (rs) {       //获取行政区域
                blist.push({points: rs.boundaries[0], name: districtName});
                drawBoundary();
            });
        }

        function drawBoundary() {
            //包含所有区域的点数组
            var pointArray = [];

            /*画遮蔽层的相关方法
             *思路: 首先在中国地图最外画一圈,圈住理论上所有的中国领土,然后再将每个闭合区域合并进来,并全部连到西北角。
             *      这样就做出了一个经过多次西北角的闭合多边形*/
            //定义中国东南西北端点,作为第一层
            var pNW = {lat: 59.0, lng: 73.0};
            var pNE = {lat: 59.0, lng: 136.0};
            var pSE = {lat: 3.0, lng: 136.0};
            var pSW = {lat: 3.0, lng: 73.0};
            //向数组中添加一次闭合多边形,并将西北角再加一次作为之后画闭合区域的起点
            var pArray = [];
            pArray.push(pNW);
            pArray.push(pSW);
            pArray.push(pSE);
            pArray.push(pNE);
            pArray.push(pNW);
            //循环添加各闭合区域
            //添加显示用标签层
            var label = new BMap.Label(blist[0].name, {offset: new BMap.Size(20, -10)});
            label.hide();
            map.addOverlay(label);

            //添加多边形层并显示
            var ply = new BMap.Polygon(blist[0].points, {
                strokeWeight: 2,
                strokeColor: "#FF0000",
                fillOpacity: 0.01,
                fillColor: " #FFFFFF"
            }); //建立多边形覆盖物
            ply.name = blist[0].name;
            ply.label = label;
            ply.Type = "Border";
            map.addOverlay(ply);

            //将点增加到视野范围内
            var path = ply.getPath();
            pointArray = pointArray.concat(path);
            //将闭合区域加到遮蔽层上,每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
            pArray = pArray.concat(path);
            pArray.push(pArray[0]);

            //限定显示区域,需要引用api库
            try {
                map.setViewport(pointArray);    //调整视野
            } catch (err) {
                console.log(err)
            }


            //添加遮蔽层
            var plyall = new BMap.Polygon(pArray, {
                strokeOpacity: 0.0000001,
                strokeColor: "#04121b",
                strokeWeight: 0.00001,
                fillColor: "#04121b",
                fillOpacity: 0.7
            }); //建立多边形覆盖物
            plyall.Type = "Border";
            map.addOverlay(plyall);

        }

        addDistrict("上海市浦东新区")
    }

 

转载于:https://www.cnblogs.com/wcnwcn/p/9961679.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值