js+jQuery判断一个点是否在多边形中

//* 计算一个点是否在多边形里

//* @param {Object} pt 标注点例: pt = {"lat":30,"lng":40}

//* @param {Object} poly 多边形数组

//例 poly = [{"lat":20,"lng":20},{"lat":40,"lng":40},{"lat":20,"lng":60}];

function isInsidePolygon(pt, poly) {
            for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
                ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) &&
                (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) &&
                (c = !c);
            return c;
        }

例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <style>
            *{
                padding: 0px;
                margin: 0px;
            }
            #examp {
                width: 500px;
                height: 400px;
                background: #aaa;
                position: relative;
            }

            #examp>div {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: red;
                position: absolute;
            }

            #examp>.point1 {
                left: 100px;
                top: 10px;
            }

            #examp>.point2 {
                left: 130px;
                top: 88px;
            }

            #examp>.point3 {
                left: 70px;
                top: 122px;
            }

            #examp>.point4 {
                left: 55px;
                top: 30px;
            }
        </style>
    </head>

    <body>
        <div id="examp">
            <div class="point1">上</div>
            <div class="point2">右</div>
            <div class="point3">下</div>
            <div class="point4">左</div>
        </div>
    </body>
    <script>
        $(function(){
                $("#examp").on("mousemove", function(e) {
                //鼠标坐标
                var MousePoint = {
                    "lat": e.offsetX,
                    "lng": e.offsetY
                };
                //自定义 的4个点的坐标
                /*
                * $("#examp>.point1").offset().left与$("#examp>.point1").offset().right可能存在小数点问题
                * 可以来个取整  parseInt($("#examp>.point1").offset().left+0.5)
                * 我就不写了（重点是方法）
                * pointArr的坐标点集合，是按照上、右、下、在的方式取的（顺时针方向 取坐标）
                * 比如我取的顺序为point1=>point2=>point3=>point4
                * */
                var pointArr = [{
                    "lat":$("#examp>.point1").offset().left,
                    "lng":$("#examp>.point1").offset().top
                },{
                    "lat":$("#examp>.point2").offset().left,
                    "lng":$("#examp>.point2").offset().top
                },{
                    "lat":$("#examp>.point3").offset().left,
                    "lng":$("#examp>.point3").offset().top
                },{
                    "lat":$("#examp>.point4").offset().left,
                    "lng":$("#examp>.point4").offset().top
                }]

                var loop = isInsidePolygon(MousePoint,pointArr);//是否在 多边形区域内
                console.log(loop);//

            })
        })

        function isInsidePolygon(pt, poly) {
            for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
                ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) &&
                (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) &&
                (c = !c);
            return c;
        }
    </script>

</html>

时间： 2024-11-06 11:21:57

js+jQuery判断一个点是否在多边形中的相关文章

jquery判断一个值是否在数组中

1.函数 var vlaue = $.inArray(value, array); 2.使用方法 if(value != -1) { console.log("value在array中"); } 原文地址:https://www.cnblogs.com/dengyongkang/p/8976510.html

js如何判断一个元素是否获得焦点:可能在实际应用中需求不多,也或许使用以下方式判断过于直白,不过原理总是那么回事,下面就是一个简单的判断元素是否获得焦点的例子,代码如下: $("#theid").click(function(){ var act = document.activeElement.id; if(act=="theid" ){ alert("获取焦点了"); } else{ alert("没有获取焦点"); }

js如何判断一个checkbox复选框是否被选中

js如何判断一个checkbox复选框是否被选中:checkbox复选框是最为常用的表单元素之一,它的作用就是用来选中和取消选中,所以有时候就要判断一个复选框是否已经被选中,下面就通过代码实例简单介绍一下如何判断一个复选框是否被选中.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&

JS/jQuery判断DOM节点是否存在

JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象.既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中代码: Object.prototype.exist = function(){ if(typeof th

如何判断一个点是否在一个多边形内？

提示:对多边形进行分割,成为一个个三角形,判断点是否在三角形内. 一个非常有用的解析几何结论:如果P2(x1,y1),P2(x2,y2), P3(x3,y3)是平面上的3个点,那么三角形P1P2P3的面积等于下面绝对值的二分之一: | x1 y1 1 | | x2 y2 1 | = x1y2 + x3y1 + x2y3 –x3y2 – x2y1 – x1y3 | x3 y3 1 | 当且仅当点P3位于直线P1P2(有向直线P1->P2)的右侧时,该表达式的符号为正.这个公式可以在固定的时

判断一个点是否在一个多边形里

“判断一个点是否在一个多边形里”,一开始以为是个挺难的问题,但Google了一下之后发现其实蛮简单,所用到的算法叫做“Ray-casting Algorithm”,中文应该叫“光线投射算法”,这是维基百科的描述:[维基百科] 简单地说可以这么判断:从这个点引出一根“射线”,与多边形的任意若干条边相交,累计相交的边的数目,如果是奇数,那么点就在多边形内,否则点就在多边形外. 如图,A点引一条射线,与多边形3条边相交,奇数,所以A点在多边形内,而从B点引一条射线,与多边形的2条边相交,偶数,所以B点

jquery判断一个div的边界是否超出另外一个div的边界

摘要:本文简单介绍jquery判断一个div的边界是否超出另外一个div的边界,如果超出边界做出相应的处理. 1.实现效果判断前判断后 2.实现思路实现类似的判断,主要是获取两个div在浏览器中的上下左右的四至,在jquery中,可以通过div.offset().left和div.offset().top获取div在浏览器中的绝对位置的left和top值:div在浏览器中的绝对位置的right和bottom为div的left+width和top+height,width和height可以通

用jQuery判断一个元素的各种状态

用jQuery判断一个元素是否显示用jQuery判断一个元素是否显示:$(element).is(":visible"); 类似的,判断一个元素是不是第一个子元素:$(element).is(":first-child") 判断一个checkbox元素是否选中:$(element).is(":checked") 判断一个元素是否存在:$(element).length 判断一个字符串中是否包含其他字符串:str.indexOf("ab

判断一个点是否在多边形内

#转载自:http://blog.csdn.net/u011722133/article/details/52813374 在GIS(地理信息管理系统)/PCL(点云库)中,判断一个坐标是否在多边形内部是个经常要遇到的问题.乍听起来还挺复杂.根据W. Randolph Franklin 提出的PNPoly算法,只需区区几行代码就解决了这个问题假设多边形的坐标存放在一个数组里,首先我们需要取得该数组在横坐标和纵坐标的最大值和最小值,根据这四个点算出一个四边型,首先判断目标坐标点是否在这个四边型之