JavaScript로 다각형 각 변의 중점 구하기

좌표 배열이 다음과 같이 주어져 있다고 가정해 보겠습니다.

const arr = [
    [-73.9280684530257, 40.8099975343718],
    [-73.9282820374729, 40.8100875554645],
    [-73.9280124002104, 40.8103130893677],
    [-73.927875543761, 40.8102554080229],
    [-73.9280684530257, 40.8099975343718]
];

여기서 각 하위 배열은 2차원 평면 위의 한 점을 나타내며, 이 점들은 n각형의 꼭짓점입니다. n은 입력 배열에 포함된 하위 배열의 개수입니다.

문제 정의

우리는 이러한 배열 하나를 인자로 받아, 새로운 배열을 반환하는 JavaScript 함수를 작성해야 합니다. 반환되는 배열은 n개의 하위 배열로 구성되며, 각 하위 배열은 다각형의 해당 변(꼭짓점과 그다음 꼭짓점을 잇는 선분)의 중점 좌표를 나타냅니다.

풀이 접근 방식

두 점 사이의 중점은 단순히 두 점의 x 좌표와 y 좌표를 각각 더한 뒤 2로 나누어 구할 수 있습니다. 다각형은 닫힌 형태이므로 마지막 꼭짓점의 다음 꼭짓점은 첫 번째 꼭짓점이 되어야 합니다. 이를 나머지 연산자(%)를 활용하면 깔끔하게 처리할 수 있습니다.

예시 코드

이를 구현한 코드는 다음과 같습니다.

const arr = [
    [-73.9280684530257, 40.8099975343718],
    [-73.9282820374729, 40.8100875554645],
    [-73.9280124002104, 40.8103130893677],
    [-73.927875543761, 40.8102554080229],
    [-73.9280684530257, 40.8099975343718]
];

const findCenters = arr => {
    const centerArray = [];
    for(let i = 0; i < arr.length; i++){
        const nextIndex = (i + 1) % arr.length;
        centerArray[i] = [];
        centerArray[i][0] = (arr[i][0] + arr[nextIndex][0]) / 2;
        centerArray[i][1] = (arr[i][1] + arr[nextIndex][1]) / 2;
    }
    return centerArray;
};

console.log(findCenters(arr));

핵심 로직을 살펴보면, (i + 1) % arr.length 연산을 통해 현재 꼭짓점의 다음 꼭짓점 인덱스를 구합니다. 마지막 요소에서는 나머지 연산 덕분에 인덱스가 0으로 순환하여 첫 번째 꼭짓점과 연결되므로, 닫힌 다각형의 모든 변을 빠짐없이 처리할 수 있습니다.

출력 결과

콘솔 출력 결과는 다음과 같습니다.

[
    [ -73.92817524524929, 40.81004254491815 ],
    [ -73.92814721884164, 40.8102003224161 ],
    [ -73.92794397198571, 40.8102842486953 ],
    [ -73.92797199839336, 40.81012647119735 ],
    [ -73.9280684530257, 40.8099975343718 ]
]

결과 배열의 각 항목은 원본 다각형의 각 변 중점에 해당하는 [x, y] 좌표 쌍입니다. 이 기법은 지도 API에서 폴리곤 경계의 라벨 위치를 계산하거나, 도형 시각화 시 변의 가운데 지점을 표시하는 등 다양한 실무 상황에서 유용하게 활용됩니다.