JS实现判断点是否在多边形范围内
一、说明
在GIS领域，判断点是否在多边形范围内是一个基础方法，这里主要说下实现原理。
原理比较简单，就是有一个GIS理论，一个点向一个方向发送射线，射线与多边形各个边相交的交点如果是奇数说明点在多边形范围内。
(图片引用自：https://blog.csdn.net/qq_27161673/article/details/52973866)
二、实现代码
所以实现代码就很清晰了，随便一个点向右侧创建射线，为啥是右侧呢，因为横线可以保持y不变，这种情况最简单更好理解。实现代码如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
//判断点是否在多边形范围内
function queryPtInPolygon(point, polygon) {
var p1, p2, p3, p4;
p1 = point;
p2 = { x: 1000000000000, y: point.y };
var count = 0;
//对每条边都和射线作对比
for (var i = 0; i < polygon.length - 1; i++) {
p3 = polygon[i];
p4 = polygon[i + 1];
if (checkCross(p1, p2, p3, p4) == true) {
count++;
}
}
p3 = polygon[polygon.length - 1];
p4 = polygon[0];
if (checkCross(p1, p2, p3, p4) == true) {
count++;
}
return (count % 2 == 0) ? false : true;
//判断两条线段是否相交
function checkCross(p1, p2, p3, p4) {
var v1 = { x: p1.x - p3.x, y: p1.y - p3.y },
v2 = { x: p2.x - p3.x, y: p2.y - p3.y },
v3 = { x: p4.x - p3.x, y: p4.y - p3.y },
v = crossMul(v1, v3) * crossMul(v2, v3);
v1 = { x: p3.x - p1.x, y: p3.y - p1.y };
v2 = { x: p4.x - p1.x, y: p4.y - p1.y };
v3 = { x: p2.x - p1.x, y: p2.y - p1.y };
return (v <= 0 && crossMul(v1, v3) * crossMul(v2, v3) <= 0) ? true : false;
}
//计算向量叉乘
function crossMul(v1, v2) {
return v1.x * v2.y - v1.y * v2.x;
}
}
}
|
使用示例
| 1 2 3 4 |
var point={x:10,y:10};
var polygon=[{x:0,y:0},{x:100,y:0},{x:100,y:100},{x:0,y:100},{x:0,y:0}];
var pts=queryPtInPolygon(points,polygon); //pts即为和多边形交叉的点集合，判断为奇数说明在多边形范围内
|
测试用例下载地址：https://download.csdn.net/download/jiangfei200809/9213835
标签：p2,p3,判断,多边形,polygon,p4,JS,p1 From： https://www.cnblogs.com/sexintercourse/p/17756696.html