지도 prefetch

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

안녕하세요. 목적지까지의 길 찾기 기능을 지원하는 서비스를 만들고있습니다.

경로 정보를 보여주면서 이동시키는 따라가기 기능을 구현중인데. 다음 경로에 대해서 불러올 때, 카카오 지도에서
http://mts.daumcdn.net/api/v1/tile/PNG02/v10_453ky/latest/3/2040/924.png 해당 경로로 요청을 보내서 png정보(지도 정보)를 가져옵니다. 지도의 정보를 많이 가져오면 잠깐이지만 버벅이는 현상이 나타나서 최적화를 진행하려고 합니다.

[ 질문 ]

  • 현재 위치가 아닌 다른 위치에 대한 정보를 미리 불러올 수 있도록 하는 기능을 지원하는게 있을까요?
  • 백그라운드로 새로운 카카오 맵을 생성시켜, 다음 경로에 대한 정보를 주입시키고, 미리 정보를 불러와 실제 필요한 부분에서 사용할 수 있도록 하는 방식을 생각중입니다. 이게 최적화가 될까요?

@이재진0550
안녕하세요~

네.

  1. 현재 보이는 위치가 아닌, 다른 위치의 정보를 미리 불러오는 기능은 없습니다. 지도판인 단순히 한판이 아닌 LOD별로 구성되어 있기 때문에, 내부적으로 이 자료구조를 업데이트 하면서 가져오는 것이라. 말씀하신 기능은 현재로써는 구현이 어렵습니다.
  2. 백그라운드라고 하면 일단 display:none 으로 된 DOM에서는 동작하지 않고, 그외 DOM의 크기 및 여러가지 기본적인 요소값들을 읽을 수 있는 백그라운드라면 약간의 가능성은 있는데 지도 API차원에서 이둘이 서로 공유되어 그러한 것은 아니고, 브라우저가 지도판 이미지 데이터를 자동으로 캐싱을 하기 때문에, 실제 움직이는 지도에서 좀더 빠른 로딩이 가능할 수 있습니다.
1개의 좋아요

친절히 답변주셔서 감사합니다!

다음과 같은 작업들을 진행해 보고 그 결과를 공유드릴까 합니다.

[ 시도1 ]
다음 경로에 대한 이미지를 정적 이미지로 불러오고, 해당 위치의 동적 이미지를 대신해서 캐싱된 정적이미지를 사용한다.

  • 해당 시도는 정적미지이와, 동적 이미지가 요청되는 경로도 다르고, 형태도 달랐기 때문에 실패

[ 시도2 ]
다음 경로에 대한 위치를 보여주는 지도를 원래있던 지도 뒤에 배치해 안보이게 하고, 미리 다음 이미지를 가져옴

  • 해당 시도는, 첫 로드시 조금 더 오랜 시간이 소요되지만 다음 경로 이동시에 간헐적인 버벅임이나, 끊김현상은 조금 줄어든 것으로 보입니다.

[ 시도2 개선 ]
위 시도2에서 연속적으로 다음 경로를 불러오게되면, 오히려 이전보다 더 많은 png를 요청하기 때문에 이전보다 더 버벅이는 문제가 생겼습니다. 이를 해결하기 위해 debounce를 사용해서 요청시간을 지연시켜, 연속적으로 변경되는 값은 건너뛰고, 원하는 위치의 인덱스만 불러올 수 있도록 만들어서 최적화를 진행했습니다.

답변해주신 내용을 토대로 좋은 결론을 낼 수 있었습니다. 감사합니다:+1::rocket:

1개의 좋아요