对于高德地图中画多边形限制无交点的需求小结

阅读 48
收藏
2018-08-24
原文链接:github.com

场景:用户可以(这个版本只能)画一个多边形的情况下,要判断用户画的图形有没有交点。 案例1(无交点):

无交点

案例2(有交点):

有交点

过程:

  1. 首先可以通过监听 "draw" 事件拿到用户描的点的坐标数组。

  2. 因为要求不高,想到可以通过简单的数学方法实现,最先想到的是限制用户只能画凸多变形或者是凹多边形。

  3. 这个方案很快就被否定,决定判断用户是不是画的多边形(无交点)即可。因为这个版本限制了只能画一个多边形,所以很好判断,后端的事儿也少,只需要通过射线算法,判断用户是不是这个区域内的就行。

准备:

叉积

通过叉积来判断向量是不是都在都一个方向(顺时针或者逆时针)

那么如何判断两个线段的交点?

[线段交点

最简单的方法就是以 AB 向量为基准,C、D分局其两侧,且以CD向量为基准,A、B分局其两侧,则两个线段相交

具体的做法就是:

|AB| * |AC| * |AB| * |AD| < 0 && |CD| * |CA| * |CD| * |CB| < 0 

当然还要考虑共线、平行等corner case。

demo

评论