項目需求
在線上地圖中判斷一個圖形是否在另一個圖形内,好像很複雜的樣子,其實的确有點複雜,我們可以這樣想。這個問題其實可以拆分成兩步,第一步實作判斷點是否在多邊形内,第二步判斷第一個多邊形所有的點是否在第二個多邊形内。

實作方案
先直接上代碼,這個方法就是關鍵的操作(用于js中),用來判斷點是否在多邊形内,先解釋一下裡面的變量及其含義
變量名 | 内容 |
---|---|
length | 多邊形點的數量 |
lianx | 多邊形内經度坐标數組 |
lianx | 多邊形内緯度坐标數組 |
lianx | 點經度坐标 |
lianx | 點緯度坐标 |
judge(length, lianx, liany, testx, testy) {
var i, j, c = false;
length = parseInt(length);
testx = parseFloat(testx);
testy = parseFloat(testy);
for (i = 0, j = length - 1; i < length; j = i++) {
liany[i] = parseFloat(liany[i]);
liany[j] = parseFloat(liany[j]);
lianx[i] = parseFloat(lianx[i]);
lianx[j] = parseFloat(lianx[j]);
if (
(liany[i] > testy) != (liany[j] > testy) &&
(testx < (lianx[j] - lianx[i]) * (testy - liany[i]) /(liany[j] - liany[i]) + lianx[i])
)
c = !c;
}
return c;
},
如果想知道原理的小夥伴可以接着往下看
這個方法其實每次都是在計算多邊形中相鄰的兩個點和測試點之間是否滿足以下兩個關系
1.測試點緯度是否在兩點緯度之間 (liany[i] > testy) != (liany[j] > testy)
2.如果在兩點之間了,接下就得判斷待測點test是否在i,j兩點之間的連線之下** (testx < (lianx[j] - lianx[i]) * (testy - liany[i]) /(liany[j] - liany[i]) + lianx[i])**
然後每次這兩個條件同時滿足的時候我們把傳回的布爾量取反。
可這到底是啥意思啊?
這個表達式的意思是說,随便畫個多邊形,随便定一個點,然後通過這個點水準劃一條射線,先數數看這條
射線和多邊形的邊相交幾次,(或者說先排除那些不相交的邊,第一個判斷條件),然後再數這條射線穿越多邊形的次數是否為奇數,如果是奇數,那麼該點在多邊形内,如果是偶數,則在多邊形外。該部分轉載百度百科。
将這步完成後,就實作了判斷點是否在多邊形,而想要實作多邊形在多邊形内,就按上述所說即可。
如果存在問題請大家批評指正!!!