[Swift] 네이버 지도 마커 클러스터링 (Quad Tree Clustering)

https://github.com/pablogsIO/PGClustering

GitHub - pablogsIO/PGClustering

 

해당 깃허브는 애플 지도에 맞는 Quad Tree 알고리즘을 적용한 프로젝트이다.

하지만 네이버 지도용으로 커스터마이징 하고 싶었다.

 

그래서 직접 위 깃허브를 토대로 네이버 지도용으로 만들어보았다!

전체적인 로직은 비슷하지만 스크롤 시 마커가 수시로 다르게 클러스터링 되는 것이 불편하여

스크롤을 해도 같은 부분을 클러스터링 하도록 조금 더 개선을 하였다.

(이 부분은 quad tree 알고리즘에 대한 이해도가 있어야 알 수 있는 부분이다.)

 

직방이나 다방만 봐도 스크롤 해도 클러스터링이 유지된 채 옮겨가는 것에 감명 받아 개선해보았다.

직접 만들어본 네이버지도용 클러스터링은 나의 깃허브에 남겨두었다.

다른 분이 만들어놓은 클러스터링 라이브러리를 사용하려했지만 커스텀이 쉽지 않아 직접 만들었다.

클러스터링의 촘촘한 간격 및 네이버지도 POI 마커에 대한 커스터마이징 등

많은것들을 내 입맛대로 다룰 수 있는게 장점이다.

단점이라면 네이버 지도 자체가 마커를 찍을때 스냅샷을 찍어 이미지화 시키기 때문에 애니메이션을 넣는게 쉽지 않았다.

그래도 나름 Quad Tree 알고리즘의 방식을 어느정도 이해하고 위 깃허브 코드를

네이버 지도용으로 리펙토링 하는 과정에서 나의 것으로 만들었다는 것에 큰 의의를 두었다.

 

https://github.com/Seonghooony/Hotple

GitHub - seonghooony/Hotple

 

 

아래는 내가 개발한 지도이다.

임의의 마커 1000개를 기준으로 클러스터링 하는 과정이 담겨있다.

 

 

 

궁금하신게 있다면 댓글 혹은 메일로 남겨주세요!

(hanrinsa2@naver.com)

---

 

아래는 참고 했던 문서나 깃허브들이였다.

 

k-means 라는 군집화 알고리즘을 적용한 프로젝트인데 분석해볼만 한 것 같다.

 

나중에 저 부스트캠프 팀분들이 만든 코드를 분석해 써먹으면 좋을거같다.

 

https://vivid-andesaurus-2c6.notion.site/17-B-Map-SDK-POI-Clustering-Interaction-Dev-4dc9e5a5d04841cabae6d9c3235394b2#2a2e263419964a7387c3ed7ee8137fe0

[17-B팀] Map SDK를 활용한 POI Clustering Interaction Dev

 

https://velog.io/@jhlee508/%EB%A8%B8%EC%8B%A0%EB%9F%AC%EB%8B%9D-K-%ED%8F%89%EA%B7%A0K-Means-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98

[머신러닝] K-평균(K-Means) 알고리즘

 

단점이라면 K-Means는 군집화 개수인 K를 정해줘야한다는 점이다. 첫번째 링크 코드를 분석해본 결과 카테고리와 줌 레벨간의 상호관계를 계산해서 K를 정해주는거 같다. 결국 어느 시점에선 굉장히 UI가 깨질 가능성이 있다고 생각했다.

 

구글 지도에서는 쿼드 트리라는 알고리즘을 사용하여 클러스터링을 지원하는 것 같다.

인터넷상 한 블로거 분이 구글 지도의 클러스터링 알고리즘을 본따 만든 라이브러리가 있다.

아래의 링크가 적용하기도 간단하기도 하고 빠르다 생각하여 개발에 참고해보았다.

 

https://github.com/manunite/NaverMapCluster

GitHub - manunite/NaverMapCluster: iOS 네이버지도 클러스터링 라이브러리 입니다.