Vue + 百度地图api 多边形覆盖物 不可重叠 两种方法

1.百度地图多边形覆盖物官方文档(多看文档)

在看文档的过程中发现了如下这个方法

这个方法算出来如果两个区域靠太近的话,即使没有重叠,返回还是有交集区域,具体问题没有深究,小伙伴知道的话,可以下方留一下言。推荐第二种方法

2.完美解决的方法

先来个老哥的传送门,这个方法完美解决了区域不能有交集的需求。

上代码

/**
     * 线段是否相交
     * seg: [{ lat: xxx, lng: xxx }, { lat: xxx, lng: xxx }]
     * */
isSegmentsIntersectant(segA, segB) {
  const abc = (segA[0].lat - segB[0].lat) * (segA[1].lng - segB[0].lng) - (segA[0].lng - segB[0].lng) * (segA[1].lat - segB[0].lat);
  const abd = (segA[0].lat - segB[1].lat) * (segA[1].lng - segB[1].lng) - (segA[0].lng - segB[1].lng) * (segA[1].lat - segB[1].lat);
  if (abc * abd >= 0) {
    return false;
  }
  const cda = (segB[0].lat - segA[0].lat) * (segB[1].lng - segA[0].lng) - (segB[0].lng - segA[0].lng) * (segB[1].lat - segA[0].lat);
  const cdb = cda + abc - abd;
  return !(cda * cdb >= 0);
},
    /**
     * 判断两多边形边界是否相交
     */
     isPolygonsIntersectant(plyA, plyB) {
  for (let i = 0, il = plyA.length; i < il; i++) {
    for (let j = 0, jl = plyB.length; j < jl; j++) {
      const segA = [plyA[i], plyA[i === il - 1 ? 0 : i + 1]];
      const segB = [plyB[j], plyB[j === jl - 1 ? 0 : j + 1]];
      if (this.isSegmentsIntersectant(segA, segB)) {
        return true;
      }
    }
  }
  return false;
},
/**
 * 判断两多变形是否存在点与区域的包含关系(A的点在B的区域内或B的点在A的区域内)
 */
 isPointInPolygonBidirectional(plyA, plyB) {
  const [pA, pB] = [[], []];
  plyA.forEach((item) => {
    pA.push(new BMap.Point(item.lng, item.lat));
  });
  plyB.forEach((item) => {
    pB.push(new BMap.Point(item.lng, item.lat));
  });
  let [a, b] = [false, false];
  a = pA.some(item => BMapLib.GeoUtils.isPointInPolygon(item, new BMap.Polygon(pB)));
  if (!a) {
    b = pB.some(item => BMapLib.GeoUtils.isPointInPolygon(item, new BMap.Polygon(pA)));
  }
  return a || b;
},
/**
 * 判断多边形是否重叠,主方法
 * */
isPolygonsOverlap(plyA, plyB) {
  return this.isPolygonsIntersectant(plyA, plyB) || this.isPointInPolygonBidirectional(plyA, plyB);
},

然后我们直接调用下面的方法

this.isPolygonsOverlap(item.getPath(),overlay.getPath())
//返回的就是结果,是否有交集和重叠

getPath 官方文档里面有

 

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值