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

编程入门 行业动态 更新时间:2024-10-25 10:30:17

百度地图API 实现<a href=https://www.elefans.com/category/jswz/34/1770241.html style=区域反遮罩,包括河北等特殊区域"/>

百度地图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 = 0rs.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(即河北外部)的视野, 这样河北省才会充满屏幕,});

注意:
这里是处理问题核心,目的是找的多个区域点最多(也就是区域最大的)当做主区域添加反遮罩,其他区域则添加遮罩;

这样会有一个问题,就是其他区域,会出现遮罩背景,对效果有一定影响,这里欢迎大家给出更好解决办法…

更多推荐

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

本文发布于:2024-02-05 09:18:31,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1674061.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:区域   河北   地图   API   反遮罩

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!