[FE] Polyline 생성 로직 및 Event Capturing 적용

Polyline 예시 코드

여러 선을 이어서 그리기

const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
for(let i =0; i < flightPlanCoordinates.length - 1; i++) {
  const tempPath = new google.maps.Polyline({
    path: [flightPlanCoordinates[i], flightPlanCoordinates[i+1]],
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });
}

하나의 선에 여러 좌표를 넣기

const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

다음과 같이 선을 그릴 때는 두 점을 잇는 짧은 길을 여러개 생성하거나, 복수의 점을 넣어서 하나의 길을 생성할 수 있다.

-	여러 선	하나의 선
장점	각 선에 이벤트를 등록할 수 있다.	생성되는 오브젝트의 수가 적다.
단점	생성되는 오브젝트의 수가 많다.	각 짧은 선에 이벤트를 등록할 수 없다.

두 방법은 다음과 같은 장단점이 존재한다.

UNIRO 에서 적용해야하는 방법

UNIRO는 매우 많은 짧은 선이 존재한다. 하나의 학교 내에 최대 1~2만 개의 간선이 생성되어 모든 오브젝트에 이벤트를 등록하게 될 경우, 메모리 소비가 매우 늘어날 가능성이 존재한다.
지도 + 모바일 서비스 특성상, 사용성이 중요하여 메모리 한계로 인한 성능 감소를 최소화로 하고자 후자의 방법을 선택하였다.

짧은 선을 탐지하는 법

메모리 사용량을 줄이기 위해, 여러 짧은 선들을 합친 하나의 선으로 생성하기로 결정하였다.
그러나, 우리는 짧은 선에 이벤트를 등록해야하는 문제가 존재한다.
이 문제를 해결하기 어려워, 다시 여러 선을 생성하는 방식으로 돌아가려 했으나, 부트캠프 학습시간에 이벤트 캡처링 방식으로 고민하였다.
현재 긴 선을 터치하였을 때, 짧은 간선을 탐지하는 과정이 필요하였기에, 이벤트 캡처링을 적용하여 긴 간선에서 터치 지점으로 짧은 간선을 특정 짓는 알고리즘을 구현하였다.

export default function findNearestSubEdge(
	edges: [google.maps.LatLngLiteral, google.maps.LatLngLiteral][],
	point: google.maps.LatLngLiteral,
): {
	edge: [google.maps.LatLngLiteral, google.maps.LatLngLiteral];
	point: google.maps.LatLngLiteral;
} {
	const edgesWithDistance = edges
		.map(([startNode, endNode]) => {
			return {
				edge: [startNode, endNode] as [google.maps.LatLngLiteral, google.maps.LatLngLiteral],
				distance: distance(point, centerCoordinate(startNode, endNode)),
			};
		})
		.sort((a, b) => {
			return a.distance - b.distance;
		});

	const nearestEdge = edgesWithDistance[0].edge;

	const distance0 = distance(nearestEdge[0], point);
	const distance1 = distance(nearestEdge[1], point);
	const nearestPoint = distance0 > distance1 ? nearestEdge[1] : nearestEdge[0];

	return {
		edge: nearestEdge,
		point: nearestPoint,
	};
}