资讯专栏INFORMATION COLUMN

基于百度地图的区域重叠判断

OBKoro1 / 2297人阅读

摘要:原文链接前些日的一个小需求用户在后台划不规则区域,区域之间不能重叠,如图判断分两步判断多变形是否有相交线段,无则进行第二步判断公式判断多变形之间是否存在顶点与多边形的包含关系代码如下点线面线段是否相交判断两多

原文链接: Fyerl"s Blog

前些日的一个小需求:
用户在后台划不规则区域,区域之间不能重叠,如图

判断分两步:
1、判断多变形是否有相交线段,无则进行第二步判断(公式)
2、判断多变形之间是否存在顶点与多边形的包含关系(BMapLib.GeoUtils.isPointInPolygon)

代码如下:

/**
 * 点: { lat: xxx, lng: xxx }
 * 线: [{ lat: xxx, lng: xxx }, { lat: xxx, lng: xxx }]
 * 面: [{ lat: xxx, lng: xxx }, { lat: xxx, lng: xxx }, { lat: xxx, lng: xxx }...]
 * */
const { BMap, BMapLib } = window;

/**
 * 线段是否相交
 * seg: [{ lat: xxx, lng: xxx }, { lat: xxx, lng: xxx }]
 * */
function 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);
}

/**
 * 判断两多边形边界是否相交
 */
function 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 (isSegmentsIntersectant(segA, segB)) {
        return true;
      }
    }
  }
  return false;
}

/**
 * 判断两多变形是否存在点与区域的包含关系(A的点在B的区域内或B的点在A的区域内)
 */
function 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;
}


/**
 * 判断多边形是否重叠
 * */
export function isPolygonsOverlap(plyA, plyB) {
  return isPolygonsIntersectant(plyA, plyB) || isPointInPolygonBidirectional(plyA, plyB);
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92712.html

相关文章

  • 百度地图开发实例番外篇--实用方法(持续更新)

    摘要:一前言在使用百度地图开发的过程中,查阅百度地图官网基本上就能满足开发的需求,但是有时候需要设置一些东西,很难在官网上查阅到相关的方法技巧。希望百度地图能够越来越强大,这样开发者就可以愉快的开发了 一 前言 在使用百度地图开发的过程中,查阅百度地图官网demo基本上就能满足开发的需求,但是有时候需要设置一些东西,很难在官网上查阅到相关的方法技巧。笔者特意把开发过程中遇到的一些疑难杂症和解...

    CocoaChina 评论0 收藏0
  • 百度地图判断多边形区域是否重复

    摘要:原文来自前端时间遇到个问题,就是判断百度地图里的多个任意多边形区域是否重复,在网上看了很多的文章都没有找到解决方案,功夫不负有心人,在网上找到个可以判断是否重复的,但是在包含的情况下就不能判断,后来自己加入根据点判断点是否在多边形内来判断重 原文来自 taoeer.top 前端时间遇到个问题,就是判断百度地图里的多个任意多边形区域是否重复,在网上看了很多的文章都没有找到解决方案,功夫不...

    Charles 评论0 收藏0
  • 百度地图判断多边形区域是否重复

    摘要:原文来自前端时间遇到个问题,就是判断百度地图里的多个任意多边形区域是否重复,在网上看了很多的文章都没有找到解决方案,功夫不负有心人,在网上找到个可以判断是否重复的,但是在包含的情况下就不能判断,后来自己加入根据点判断点是否在多边形内来判断重 原文来自 taoeer.top 前端时间遇到个问题,就是判断百度地图里的多个任意多边形区域是否重复,在网上看了很多的文章都没有找到解决方案,功夫不...

    gself 评论0 收藏0
  • 计算机视觉识别简史:从 AlexNet、ResNet 到 Mask RCNN

    摘要:最近,物体识别已经成为计算机视觉和最令人激动的领域之一。故事开始于年赢得了大规模视觉识别挑战赛。感受野特征的输入区输入图像区会影响特征的激活。的架构决定了感受野是如何随着层数的改变而改变的。这些被推出区域被裁剪并扭曲到固定大小的图像。 最近,物体识别已经成为计算机视觉和 AI 最令人激动的领域之一。即时地识别出场景中所有的物体的能力似乎已经不再是秘密。随着卷积神经网络架构的发展,以及大型训练...

    BigTomato 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<