ํธ๋ฆฌํ ์น ์ผ์ ํ์ ๊ฐ๋ฐํ๋ฉด์ ํน์ ์๊ฒฝ๋ ์ขํ ์ง์ ์ด ๊ตญ๋ด์ธ์ง ํด์ธ์ธ์ง ํ๋จํ๋ ๋ฐฉ๋ฒ์ด ํ์ํ์ต๋๋ค.
๊ตฌ๊ธ ์ง๋ API์์ ์ ๊ณตํ๋ reverse geocoding๊ฐ์ ๋ฐฉ๋ฒ์ ํตํด ํด๊ฒฐํ ์๋ ์์ง๋ง, ์ถ๊ฐ์ ์ธ API ์ฌ์ฉ์ ์ํด ๋น์ฉ์ ์ง๋ถํ๋ ๋์ ์ํ์ ์ผ๋ก ๊ฐ๋ณ๊ฒ ์ฒ๋ฆฌํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ฐพ์๋ดค์ต๋๋ค.
๐ Point-In-Polygon ์๊ณ ๋ฆฌ์ฆ
๋ค๊ฐํ์ ๊ต์ ์ ์ด์ฉํด์ ํ๋จํ๊ธฐ
์์ ๊ฐ์ ๋ค๊ฐํ์์ ๋ถ์ ์ ์ A
๋ผ๊ณ ํ๊ฒ ์ต๋๋ค.
์ด๋ ์ขํ A
๊ฐ ๋ค๊ฐํ ์์ ์กด์ฌํ๋์ง ํ๋จํ๊ธฐ ์ํด์๋ ํด๋น ์ง์ ์ ๊ธฐ์ค์ผ๋ก ์ํ์ ์ ๊ทธ์ด์ ๊ต์ฐจ๋๋ ๋ณ์ ๊ฐ์๋ฅผ ์ธ์ด์ฃผ๋ฉด ๋ฉ๋๋ค.
๋ฐฉํฅ์ ์๊ด์๊ณ , ํ์ชฝ์ผ๋ก๋ง ๊ทธ์ด์ฃผ๋ฉด ๋ฉ๋๋ค. ์ด๋ ๊ต์ฐจ๋๋ ์ง์ ์ node
๋ผ๊ณ ํํํ๊ฒ ์ต๋๋ค.
๋ง์ฝ node
์ ๊ฐ์๊ฐ ํ์๋ผ๋ฉด ๋ค๊ฐํ์ ๋ด๋ถ์, ์ง์๋ผ๋ฉด ์ธ๋ถ์ ์กด์ฌํ๋ ๊ฒ์
๋๋ค.
node๊ฐ ๊ผญ์ง์ ์ ์กด์ฌํ๋ ๊ฒฝ์ฐ
node
๊ฐ ๊ผญ์ง์ ์ ์๋ ๊ฒฝ์ฐ๋ฅผ ๊ณ ๋ คํด ๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ ๊ฒฝ์ฐ ๋ชจ๋ ํ ๋ณ์ ๋ํด์ ์ํ ์ง์ ์ ๊ต์ฐจ ์กฐ๊ฑด์ ์ค์ ํด ์ฃผ๋ฉด ์ค๋ณต๋๋ node
๋ฅผ ์ ๊ฑฐํ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด ์ฒซ ๋ฒ์งธ ๋ค๊ฐํ์์ ๋ณ a
๊ฐ ๋ ์ ์ a'1
๊ณผ a'2
๋ก ์ด๋ฃจ์ด์ง๋ค๊ณ ํ ๋, a'1 <= X < a'2
์ ํฌํจ๋๋ ๊ฒฝ์ฐ์๋ง ๊ต์ ์ผ๋ก ํ๋จํ๋ ๊ฒ์
๋๋ค.
node์ X์ถ ์ขํ๊ฐ ๊ตฌํ๊ธฐ
๊ต์ ์ Y
์ถ ์ขํ๋ ๊ธฐ์ค์ ๊ณผ ๋์ผํ๋ฐ, ๊ทธ๋ฌ๋ฉด X
์ถ ์ขํ๊ฐ์ ์ด๋ป๊ฒ ์ ์ ์์๊น์?
์ด๋ 2์ฐจ์ ์ง์ ์ ๋ฐฉ์ ์
์ ์ฌ์ฉํด์ ๊ตฌํ ์ ์์ต๋๋ค.
m (๊ธฐ์ธ๊ธฐ) : (y - y1) / (x - x1)
x = (y - y1) / m + x1
์ฝ๋๋ก ์ฎ๊ฒจ๋ณด์
์ ๋ด์ฉ๋ค์ ์ฝ๋๋ก ๊ตฌํํ๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
const GEO_POLYGON = [
// ...
]
const SIZE = GEO_POLYGON.length
export function isPointInPolygon(point) {
const target = getLatLng(point)
let end = SIZE - 1
let isInside = false
for (let start = 0; start < SIZE; start += 1) {
const { lat: slat, lng: slng } = getLatLng(GEO_POLYGON[start])
const { lat: elat, lng: elng } = getLatLng(GEO_POLYGON[end])
// โ
Y ์ถ ์ขํ๊ฐ (start, end) ๋ก ์ด๋ฃจ์ด์ง ๋ณ์ ํฌํจ๋๋์ง ํ๋จํฉ๋๋ค.
const isYIntersect =
(slat < target.lat && target.lat <= elat) ||
(elat < target.lat && target.lat <= slat)
if (isYIntersect) {
// โ
์ง์ ์ ๋ฐฉ์ ์์ผ๋ก ๊ต์ ์ X ์ขํ๋ฅผ ๊ตฌํฉ๋๋ค.
const gradient = (elat - slat) / (elng - slng)
const x = slng + (target.lat - slat) / gradient
// โ
๊ธฐ์ค ์ขํ๋ณด๋ค ์ผ์ชฝ์ ์์นํ๋ ๊ต์ ๋ง ํฌํจ์ํต๋๋ค.
if (x < target.lng) {
isInside = !isInside
}
}
end = start
}
return isInside
}
๐ ์ฃผ์์ฌํญ
Point-In-Polygon
์๊ณ ๋ฆฌ์ฆ์ 2์ฐจ์ ํ๋ฉด์ ๊ฐ์ ํ๊ณ ์ ์๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ์ค์ ์๊ฒฝ๋ ์ขํ๊ณ์ ๋์
ํด์ ์ฌ์ฉํ๋ฉด ์ง๊ตฌ์ ๊ณก๋ฅ ๋๋ฌธ์ ์ค์ฐจ๊ฐ ๋ฐ์ํฉ๋๋ค.
๋ค๋ง ๋ํ๋ฏผ๊ตญ์ ๊ฒฝ์ฐ ๋๋ฅ์ ๋ฉด์ ์ด ์ด ์ค์ฐจ์ ์ํฅ์ ๋ฐ์ ๋งํผ ํฌ์ง๋ ์๊ธฐ ๋๋ฌธ์ ํด๋น ์๊ณ ๋ฆฌ์ฆ์ ์ด์ฉํด์ ํ๋จํ์ต๋๋ค.
๐ ์ฐธ๊ณ ์๋ฃ
'๐จโ๐ป web.dev > fe' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์ ๊ท์์ผ๋ก camel-case ํ์ฑํ๊ธฐ (1) | 2024.02.24 |
---|---|
rAF ํ๋ ์ ๋น์จ ์กฐ์ ํ๊ธฐ (0) | 2024.01.30 |
Vanilla JS ๋ก FigJam ์น์ฑ ๋ง๋ค๊ธฐ (1) | 2024.01.23 |
Canvas ๋ํ ํ์ ์ ์๋ฆฌ์ ๊ตฌํ ๋ฐฉ๋ฒ (1) | 2023.08.29 |
Storybook useArgs ํ์ฉํ๊ธฐ (1) | 2023.08.28 |
๐ฌ ๋๊ธ