JS實現判斷點是否在多邊形範圍內
一、說明
在GIS領域，判斷點是否在多邊形範圍內是一個基礎方法，這裡主要說下實現原理。
原理比較簡單，就是有一個GIS理論，一個點向一個方向發送射線，射線與多邊形各個邊相交的交點如果是奇數說明點在多邊形範圍內。
(圖片引用自：//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即為和多邊形交叉的點集合，判斷為奇數說明在多邊形範圍內
測試用例下載地址：//download.csdn.net/download/jiangfei200809/9213835
