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

　　

测试用例下载地址：https://download.csdn.net/download/jiangfei200809/9213835