[FE] 새로운 길 생성 로직

새로운 길 생성

• 본 서비스는 참여형 서비스로 사용자들이 학교 내에 존재하는 숨은 길들 + 지도에 나타나지 않은 길들을 생성하는 기능을 지원합니다.

길 생성 Case

1. 존재하는 길 - 존재하는 길
2. 존재하는 길 - 새로운 곳

길 생성 Case
파란색 선은 가능 / 빨간색 선은 불가

제보 조건

• 서비스의 메인 기능인 길 찾기를 적용하기 위해서, 모든 길들은 연결되어 있도록 해야합니다.
• 위에서 정의된 케이스를 모두 만족하기 위해서는 시작점 혹은 도착점이 존재하는 길 위에 존재해야 하기에 더 간단하게 구현을 위해서 시작점을 무조건 선 위에서 시작할 수 있도록 하였습니다.

초기 사용자 인터렉션

1. 사용자가 드래그를 통해 그림을 그리기
2. 사용자가 화면을 터치하여 직선을 만들기(현재 버전)

초기 논의 단계에서는 사용자 인터렉션으로 2가지 아이디어가 존재하였습니다. 사용자에게 더 자유로운 인터렉션을 제공하기에는 1번의 방법이 훨씬 좋다고 생각하여 데모를 제작했습니다. 그러나, 1번의 단점은 지도에 일정한 형태의 길을 그리기 위해서는 사용자의 손떨림, 오차 등을 보정할 수 없다고 판단하여 직선을 그리기 위해 2번의 방식을 채택하였습니다.

길 생성

• 앞에서 결정되었듯이, 사용자는 길을 만들기 위해서 원하는 곳을 터치하며 직선을 생성합니다.
• 가장 기본적인 방법은 서버에 사용자가 선택한 지점의 좌표들을 전송하는 것입니다.

길 생성 기초 로직
터치 지점 (검은색 원) 을 이어 선을 생성

• 그러나 곡선을 표현, 길 병합 및 길 찾기에서 정밀한 길을 제공하기 위해서는 길을 일정 간격으로 제공할 필요가 있었습니다.
• 사용자가 생성한 길을 일정하게 3m 간격으로 분할하였습니다.
• 3m로 선정한 이유는 일반적으로 도보 사용자의 보폭으로 3~5 걸음으로 갈 수 있는 길이기에 모든 곡선 + 세밀한 길 병합을 표현할 수 있다 생각하였습니다.

길 분할

1. 고정된 길이로 길을 분할
2. 동일한 간격으로 길을 분할

• 고정된 길이로 길을 분할하게 될 경우, 고정된 길이랑 길이 차이가 많이 발생하는 짧은 선이 생성될 가능성이 높다.
• 그리하여, 고정된 길이에 비슷하고 모두 일정한 길이를 가지도록 길을 분할한다,

길 분할 로직

POST 요청 - 사용자가 POST 요청을 하게 될 경우, POST의 Body에는 클라이언트에서 길을 분할(샘플링)하여 전송한다.

길 생성 과정
점 생성
길 생성
길 분할

코드

export default function createSubNodes(polyLine: google.maps.Polyline): Coord[] {
	const paths = polyLine.getPath();
	const [startNode, endNode] = paths.getArray().map((el) => LatLngToLiteral(el));

	const length = distance(startNode, endNode);

	const subEdgesCount = Math.ceil(length / EDGE_LENGTH);

	const subNodes: Coord[] = [startNode];

	for (let i = 1; i < subEdgesCount; i++) {
		const fraction = i / subEdgesCount;
		subNodes.push(interpolate(startNode, endNode, fraction));
	}

	subNodes.push(endNode);

	return subNodes;
}

PR

새로운 길 생성 로직