JS实现判断点是否在多边形范围内

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