네이버_지도_클러스터링_마커 - boostcampwm-2024/and04-Nature-Album GitHub Wiki
✅ 진행한 기능
- clusteringkey 객체 생성
- cluster 객체 생성
- 클러스터 마커 수정
- 클러스터 마커 클릭시 규칙에 맞는 사진 이미지를 마커로 그리기
💡문제 해결 과정 기록
-
단순 클러스터링
-
촬영한 사진들을 단순 클러스터링 시도
-
LeafMarker는 기본 마커로, ClusterMarker는 클러스터링 된 마커의 숫자와 함께 기본 클러스터 마커 적용
-
-
LeafMarker에 이미지 적용(이미지 로드 테스트)
-
leafMarkerUpdater
에서 이미지 마커 생성및 이미지 로드 시작하고 로드가 끝나면 이미지를 마커에 적용 -
Cluster Marker에 이미지가 적용되는 문제 발생
-
Marker를 재활용하는 과정에서 LeafMarker로 이미지 로드를 시작한 마커를 clusterMarker로 사용하고 이미지 로드가 끝난 시점에 해당 마커의 아이콘을 업데이트하면서 발생한 문제.
⇒ 이미지 마커는 하나만 생성 후 재사용, leaf node와 cluster node의 시각적 구분을 없애고 노드 선택시 이미지 마커 보이도록 수정
-
-
이미지 마커 분리
- 클러스터와 이미지 마커를 분리해 클러스터를 선택하면 해당 클러스터에 포함된 사진중 하나를 이미지 마커로 그리기
- LeafMarkerInfo에서 클러스터에 추가한 key를 구할수 있어 key에 photoDetail 객체를 주입해 사용
- ClusterMarkerInfo에서는 key를 구할수 없어 다른 방법 필요
⇒ 클러스터에 tag로 photoDetail 객체 추가
https://github.com/user-attachments/assets/f296988b-fa95-488c-9364-b1eda7fb9fe9
-
클러스터의 태그는 병합 규칙이 필요해서
해당 클러스터의 사진들중 가장 많은 라벨의 최신 사진을 선택하려고 했으나
클러스터링 방식의 이해가 부족해 원하는 규칙대로 병합되지 않음
(병합 규칙을 설정할때 children으로 모든 리프노드를 순회할 줄 알았으나 바로 직전에 합쳐진 노드들만 탐색)
-
클러스터 마커 수정
-
svg이미지 마커 → 화면 확대에 고정된 크기, 회전시에도 고정되어있음. 클러스터별로 크기 추가조작 필요
-
(추가사항) 마커의 isFlat 속성을 true로 바꾸면 지도 회전시에 함께 회전됨을 확인
-
-
Circle OverLay 시용 → 회전에는 대응되지만 화면 축소. 확대 여부와 상관없이 고정된 크기
-
merge시에 각 노드별로 오버레이를 추가하니 cluster marker의 위치에도 그려지는 문제
- merge시점이 아니라 단순히 사진들의 위치에 그림을 그릴 필요있음
-
화면 축소시 크기가 작아지는것때문에 사용 x
-
-
ClusterManager 도입 시도
- Cluster의 빌더에서 설정할 수 있는 속성들로부터 현재 클러스터의 상태를 저장하고, 별도의 마커로 그리기 시도
내가 알수있는 정보
-
클러스터 레벨
-
LeafMarker의 tag
-
ClusterMarker의 tag(최상단)
⇒ 각 클러스터의 노드들의 위치
각 노드들의 상태(Cluster인지 Leaf인지)와 Cluster라면 해당 클러스터에 어떤 사진들이 포함되어있는지 등을 기억하게 할수 는 있었지만 화면에 그리기 위한 마커의 크기를 구할 방법을 찾지 못함
-
클러스터링 전후 마커 위치 비교
클러스터의 노드들의 위치를 기반으로 해당 클러스터의 경계를 구해 마커의 사이즈를 정하려는 시도
→ 현재 지도의 zoom을 알지못해 보류 → 히트맵 도전기
-
최종
- 클러스터 아이콘 수정
클러스터 태그를 해당 클러스터에 포함된 사진들의 id로 수정- 각 클러스터 노드가 현재 노드에 포함된 아이템의 정보를 알 수 있도록 아이템의 리스트로 설정
https://github.com/user-attachments/assets/17e00eb1-c765-4f76-be32-19c2622ffca5