最近接着个需求,需要在地图上将行政区域高亮,在网上找了几个方法,都是自己算的点顺序,总结了一下,出现过以下几个问题

1、行政区域边线画出来了,但是遮罩不准,应该是点顺序的问题,导致总是有显示或者不显示的地方

2、有一条线连到边界,或者区域外有些地方不准

3、自己按照一定的顺序组合点顺序,看着费劲,不方便

自己研究了一下,做了一下改动,很简单,在这里记录一下。代码如下。

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);

百度地图 行政区域 高亮相关推荐

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

    >本文转载至网络: 原文地址:https://blog.csdn.net/duan1311/article/details/81381278 function getBoundary(){ // ...

  2. 实现百度地图-区域高亮展示

    一.功能步骤 1. 创建springboot项目,并导入以下依赖 <dependencies><dependency><groupId>org.springfram ...

  3. 高德地图API和百度地图API哪个更适合开发者?

    高德vs百度 优点: 1.api十分简单易上手,高德一行代码,百度最少要五行: 2.数据量很丰盛,郊区poi<无关键字>搜索随便都有几十个,然而百度早早就关闭了该接口: 缺点: 1.偶尔出 ...

  4. 根据经纬度确定行政区域_基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标...

    前言 近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GP ...

  5. 使用openlayers加载地图行政区域(结合百度云地图)

    在某一个项目中,需要在一张地图上叠加中国行政区域,提供省.市两级行政区域的范围,由于自己的数据源不全,不能保证数据的完整性,所以采用调用百度云地图的API来实现在地图上显示行政区划范围:项目中使用的技 ...

  6. 奥维查看行政边界_【百度地图API】如何获取行政区域的边界? (转载)

    摘要:以前教过大家如何自行获取行政区域,或者自定义获取一个区域的边界值.今天来教大家直接调用百度地图API1.3(目前最新版本)来获取行政区域的边界值. ----------------------- ...

  7. 百度地图 省市级三级行政区域显示(附带点聚合标记)

    一.登录百度开放平台 开放平台网址:https://lbsyun.baidu.com/ 二.申请访问应用ak 路径:控制=>应用管理=>我的应用=>创建应用=>在应用类型中选择 ...

  8. 百度地图 添加行政区域

    找资料的时候看到很多大佬写过关于百度地图添加行政区域但是由于我的是离线地图直接用百度地图api获取不到,所以自己写了一遍 记录一下. function getBoundary(){ var areas ...

  9. 百度地图获取行政区域以及自定义显示网格

    目录 1 问题描述 2 独立显示区域 3 自定义网格 4 显示自定义网格 5 延展 6 参考文献 1 问题描述 (1) 通过百度地图或者高德地图只展示某一个行政区域,例如整个地图只展示郑州市金水区,其 ...

最新文章

  1. 分形之闵可夫斯基(Minkowski)
  2. Javascript的变量作用域居然可以跨越多个函数!
  3. 多场景下的AI疫情防控“天网”:解读云边端联动下的全栈 AI 技术
  4. 试图加载格式不正确的程序_好程序员大数据学习路线之hive存储格式
  5. 史上最通俗分布式锁解读
  6. jsp iframe嵌入php,jsp中的iframe什么意思
  7. linux查看网络连接命令,系统运维|使用netstat检测及监测网络连接
  8. php过滤空格和回车,php如何去掉空格换行
  9. IntelliJ IDEA 更换背景图和背景颜色
  10. xcode打包导出ipa
  11. SpringBoot的幕后推手,java互联网架构师系统vip课程
  12. 最全的基于c++的serialport.cpp与serialport.h类文件(解析版)
  13. WCF服务通过TCP实时监控客户端状态,并可以向客户端广播推送消息,实现双向通信
  14. 26、BDS B1I电文处理实现
  15. 企业信息安全注意事项
  16. 百度AI评测:新闻摘要
  17. 基于豆瓣评价的文本分析 ——以《流浪地球》为例
  18. 服务器维修模板,中国直辖市服务器维修及数据恢复模板.doc
  19. 如果大家看了我的tools专栏,里面的小工具有不少,我提炼出来给大家——汉诺塔
  20. 科技的成就(三十九)

热门文章

  1. 如切如磋,如琢如磨 - 南怀瑾
  2. 揭露丑恶:中国社会的职业道德集体缺失?
  3. 使用 auto-drawing 画一个鱼骨图
  4. VSCode中MarkDown图片无法显示
  5. 有道云笔记中markdown插入本地图片(绝对路径)后无法显示图片问题
  6. 机器人串联关节矩阵旋转变换推导
  7. 为什么人生气时说话用喊的?
  8. Android APP的安装路径
  9. android程序安装目录在哪里,Android app 安装目录知识
  10. 丹江口计算机学校,丹江口中专学校计算机网络技术寒假实习