js+jQuery判斷一個點是否在多邊形中
阿新 • • 發佈：2017-11-11
turn 順序 point mov htm 500px com bject arr //* 計算一個點是否在多邊形裏
//* @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>
js+jQuery判斷一個點是否在多邊形中