Map.cameraPosition.zoom 으로 현재 지도의 줌 레벨을 구할수 있음을 확인하고 클러스터의 UI를 히트맵으로 변환하는것을 시도해보았다.

💡문제 해결 과정 기록

일단 클러스터링 전 후 마커 위치를 확인해봤다.

합쳐지기 직전의 노드들의 평균(클러스터는 하나로 계산)이 아니라 클러스터에 포함된 모든 단말노드의 평균으로 만들고 싶었다.

클러스터 노드에 해당 클러스터에 포함된 모든 아이템의 id을 관리하게 해서

클러스터 마커를 업데이트 할때 포함된 클러스터 노드들의 평균 위치로 위치를 지정하게 했으나 동작하지 않았다.

클러스터 노드의 위치는 마커를 업데이트 할때 지정하는것이 아니라 클러스터에 아이템을 추가할때 계산하고, 이후에는 해당 값을 사용해 같은 연산을 반복하지 않도록 최적화 한것을 알수 있었다.

→ positioningStrategy 설정으로 위치 지정 가능

중심으로 위치 시키는데 성공했다.

해당 과정에서 중요한것은 positioningStrategy 에서 node에 children으로 접근할때
자식 리프노드 전체를 순회하는것이 아니라 합쳐질 최상위 노드들에 대해서만 확인하므로 각각의 노드에 태그 등으로 자식노드 전체를 알수있는 정보가 추가로 필요하다.
아니면 리프노드일때까지 재귀로 순회를 돌게 하는것도 방법일 수도 있겠다.

다만 클러스터를 히트맵으로 변화할때의 문제는 클러스터 노드들간의 병합 규칙에 의해 클러스터링이 수행되므로 리프노드간 거리가 더 가까움에도 별개의 클러스터로 구분된다는 점이다.

클러스터링의 결과를 히트맵으로 전환하기에는 그룹화 되는 노드들이 클러스터와 히트맵이 달라서 별도의 그룹화 알고리즘이 필요하다.

(히트맵 UI로 변경하기 위해선 각 리프노드들간의 거리에 의한 그룹화가 필요)

다른 접근방법

일단 클러스터링에 대해서는 접어두고 별도의 알고리즘을 고민해보자

현재 필요한것은 특정 마커를 선택했을때, 화면상에서 threshold 이하 거리의 마커들을 그룹화하는 부분이다.

이를 위해 일단 전체 노드들을 연결하는 MST를 구하고

해당 그래프의 간선들을 거리기준 오름차순으로 정렬,

각 거리와 threshold에 해당하는 zoom 레벨에 따라 전체 그래프의 구성을 미리 계산해두고 줌 레벨이 바뀔때마다 마커를 새로 그리면 될것같다.

• 추가로 결국에 위치를 아는 마커들의 그룹을 가지고 히트맵의 ui를 그려야한다.

이차원 평면에 각 노드의 위치에 맞춰 포인트를 찍고, 카메라의 줌 레벨에 맞춰 평면을 스케일링,

전체 노드들이 연결된것을 시각화하기 위해 스무딩 작업이 추가로 필요(블러처럼 동작)

줌 레벨이 변화할때마다 매번 ui를 다시 그려 마커의 아이콘으로 지정할 필요가 있음

⇒ 차라리 구글맵의 히트맵을 사용하고 블러의 크기로 mst를 구해 클릭 이벤트 처리만 따로 하는게 나을것 같음

히트맵 ui로 변경할지 팀원들과 상의 후 결정

→ 시간 관계상 구글 맵 전환 및 히트맵으로 변경은 힘들것 같아 기존 네이버 지도 클러스터링을 유지

대신 각 클러스터에 몇개의 사진이 있는지 보여주기 위해서 갯수에 따른 색깔 조절, 갯수의 텍스트화 진행