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

一、说明

在GIS领域，判断点是否在多边形范围内是一个基础方法，这里主要说下实现原理。

原理比较简单，就是有一个GIS理论，一个点向一个方向发送射线，射线与多边形各个边相交的交点如果是奇数说明点在多边形范围内。

(图片引用自：https://blog.csdn.net/qq_27161673/article/details/52973866)

二、实现代码

所以实现代码就很清晰了，随便一个点向右侧创建射线，为啥是右侧呢，因为横线可以保持y不变，这种情况最简单更好理解。实现代码如下：

    //判断点是否在多边形范围内
    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;
        }
    }
}

使用示例

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即为和多边形交叉的点集合，判断为奇数说明在多边形范围内