관리자에게 배차된 경로를 시각적으로 알려주기 위해선, map 위에 custom overlay로 marker, polyline을 그리는 작업이 필요합니다. marker, polyline 모두 html/svg/canvas를 이용해 그려지는 overlay 계층에 해당합니다.
도로를 그리기 위해선 polyline 중 선이 필요합니다. 이때, 주의해야 하는 점은 polyline은 비동기 로직이기에 응답 결과가 먼저 온 순서대로 콜백 함수가 실행되어 배열 순서대로 선을 그리기 위해선 동기적으로 콜백 함수를 처리하는 부분이 필요합니다.
custom overlay 위에 단일 도로 세트마다 하나의 polyline을 만들어 관리한다면, 복수 도로를 그릴 수 있다. 또는 폴리곤 객체 위에 이중 배열을 사용해 여러 개의 직선을 만들 수 있습니다.
polyline을 그릴 때, 전체 로직을 전달하여 한 번에 경로를 그리도록 설정했습니다. 하지만 큰 경로를 한 번에 그릴 때 대기 시간이 필요했고 화면이 깜빡이는 현상이 발생했습니다. UX적 측면에서 경로 로드 대기 시간에 해당하는 깜빡임이 사용자에게 나쁜 경험을 준다고 판단하여 개선 방안을 도입하게 되었습니다.
개선된 방법은 requestAnimationFrame(rAF)를 기반으로 화면 렌더링을 할 때, 경로를 묶음으로 생성하여 각 묶음을 polyline으로 순차적으로 렌더링하는 것입니다.