百度地图 省份/城市边界描边处理，省市外添加半透明遮罩，河北省特殊处理 |
您所在的位置：网站首页 › ps添加边框和文字 › 百度地图 省份/城市边界描边处理，省市外添加半透明遮罩，河北省特殊处理 |
百度地图 省份/城市边界描边处理，省市外添加半透明遮罩，河北省特殊处理
|
项目中有这样一个需求，使用百度地图，对河北省省边界进行描边，省份以外添加半透明遮罩。 一、先封装一个添加遮罩方法 setTimeout(function(){ // 省/市外 添加遮罩 getBoundary('河北省'); }, 1000); //指定省市进行描边处理，省市外进行半透明遮盖。 function getBoundary(city){ var bdary = new BMap.Boundary(); bdary.get(city, function(rs){//获取行政区域 map.clearOverlays();//清除地图覆盖物 //思路：利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层 //1.获取选中行政区划边框点的集合rs.boundaries[0] var strs = new Array(); strs = rs.boundaries[0].split(";"); var ENWS = ""; for (var i=0;i 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); map.setViewport(ply.getPath());//调整视野 }); }先看看效果，如下图： 经过各种尝试，终于还是找到了原因：其他省/市在地图板块中都是独立的一个板块，可以正常展示，但河北省在地图版块中，被分为两个板块，通过以上方法无法完全展示，这是最根本的原因。 这里，我们以北京市为对比对象，来看看究竟与河北省有啥区别: 如图，通过对比可以发现，河北省的覆盖物边框点，有两部分。 第一次只展示河北省内部，因为我们只获取了rs.boundaries[0]，这部分仅仅表示河北省内部，此时，我们需要获取rs.boundaries[1]河北省外部，将这部分与外围自定义东南西北形成一个环形遮罩层，再分别为外部、内部区域添加边框和填充色。 话不多说，上修改后的代码： setTimeout(function(){ // 省/市外 添加遮罩 getBoundary('河北'); }, 1000); //指定省市进行描边处理，省市外进行半透明遮盖。 function getBoundary(city){ var bdary = new BMap.Boundary(); bdary.get(city, function(rs){//获取行政区域 map.clearOverlays();//清除地图覆盖物 //思路：获取河北省(外部)边框点的集合与外围自定义东南西北形成一个环形遮罩层，再分别为外部、内部区域添加边框和填充色 // ps: 外部 -> 河北省(除了中心部分); 内部 -> 河北省(中心部分) //1.获取河北省外部边框点的集合rs.boundaries[1] var strs = new Array(); strs = rs.boundaries[1].split(";"); var ENWS = ""; for (var i=0;i strokeColor:"none",strokeOpacity:0,fillColor:"#fff",fillOpacity:"0.8" }); //建立多边形覆盖物 map.addOverlay(ply); //4.给河北省外部添加边框和填充色 var ply1 = new BMap.Polygon(rs.boundaries[1], {strokeWeight:3,strokeColor:"#114bf3",fillColor:""}); map.addOverlay(ply1); //5.为河北省内部添加边框和填充色 var ply0 = new BMap.Polygon(rs.boundaries[0], {strokeWeight:3,strokeColor:"#114bf3",fillColor:"transparent",fillOpacity:"0"}); map.addOverlay(ply0); map.setViewport(ply1.getPath());//调整视野 这里需要注意, 调整为ply1(即河北外部)的视野, 这样河北省才会充满屏幕, }); }修改后的效果图： 细心的小伙伴会发现，河北省(内部)那部分区域，与最外层遮罩颜色一致(都是白色半透明)，原因是为外部添加遮罩时，也会将内部区域计算进来。 如何解决该问题 ？欢迎大家留言提供思路或解决办法 。 福利：上述 表情包gif动图获取地址：qq新版&旧版&搞笑版_gif_表情包 评论留言即可免费领取 ~ |
缩小后效果： 
很明显，这并不是真正的河北地图！！
这样就解决啦 ~【本文地址】
今日新闻 |
推荐新闻 |