네이버_지도_클러스터링_마커 - boostcampwm-2024/and04-Nature-Album GitHub Wiki

✅ 진행한 기능

  • clusteringkey 객체 생성
  • cluster 객체 생성
  • 클러스터 마커 수정
  • 클러스터 마커 클릭시 규칙에 맞는 사진 이미지를 마커로 그리기

💡문제 해결 과정 기록

  1. 단순 클러스터링

    • 촬영한 사진들을 단순 클러스터링 시도

    • LeafMarker는 기본 마커로, ClusterMarker는 클러스터링 된 마커의 숫자와 함께 기본 클러스터 마커 적용

      스크린샷 2024-11-19 23-23-20

  2. LeafMarker에 이미지 적용(이미지 로드 테스트)

    • leafMarkerUpdater 에서 이미지 마커 생성및 이미지 로드 시작하고 로드가 끝나면 이미지를 마커에 적용

      스크린샷 2024-11-19 23-27-17

    • Cluster Marker에 이미지가 적용되는 문제 발생

    • Marker를 재활용하는 과정에서 LeafMarker로 이미지 로드를 시작한 마커를 clusterMarker로 사용하고 이미지 로드가 끝난 시점에 해당 마커의 아이콘을 업데이트하면서 발생한 문제.

    ⇒ 이미지 마커는 하나만 생성 후 재사용, leaf node와 cluster node의 시각적 구분을 없애고 노드 선택시 이미지 마커 보이도록 수정

  3. 이미지 마커 분리

    • 클러스터와 이미지 마커를 분리해 클러스터를 선택하면 해당 클러스터에 포함된 사진중 하나를 이미지 마커로 그리기
    • LeafMarkerInfo에서 클러스터에 추가한 key를 구할수 있어 key에 photoDetail 객체를 주입해 사용
    • ClusterMarkerInfo에서는 key를 구할수 없어 다른 방법 필요

    ⇒ 클러스터에 tag로 photoDetail 객체 추가

    https://github.com/user-attachments/assets/f296988b-fa95-488c-9364-b1eda7fb9fe9

    • 클러스터의 태그는 병합 규칙이 필요해서

      해당 클러스터의 사진들중 가장 많은 라벨의 최신 사진을 선택하려고 했으나

      클러스터링 방식의 이해가 부족해 원하는 규칙대로 병합되지 않음

      (병합 규칙을 설정할때 children으로 모든 리프노드를 순회할 줄 알았으나 바로 직전에 합쳐진 노드들만 탐색)

  4. 클러스터 마커 수정

    • svg이미지 마커 → 화면 확대에 고정된 크기, 회전시에도 고정되어있음. 클러스터별로 크기 추가조작 필요

      스크린샷 2024-11-19 14-01-03 스크린샷 2024-11-19 14-01-15 스크린샷 2024-11-19 14-01-42

    • (추가사항) 마커의 isFlat 속성을 true로 바꾸면 지도 회전시에 함께 회전됨을 확인

  5. Circle OverLay 시용 → 회전에는 대응되지만 화면 축소. 확대 여부와 상관없이 고정된 크기

    • merge시에 각 노드별로 오버레이를 추가하니 cluster marker의 위치에도 그려지는 문제

      • merge시점이 아니라 단순히 사진들의 위치에 그림을 그릴 필요있음
    • 화면 축소시 크기가 작아지는것때문에 사용 x

      스크린샷 2024-11-19 13-54-09 스크린샷 2024-11-19 13-54-23 스크린샷 2024-11-19 13-55-39 스크린샷 2024-11-19 13-55-46

  6. ClusterManager 도입 시도

    • Cluster의 빌더에서 설정할 수 있는 속성들로부터 현재 클러스터의 상태를 저장하고, 별도의 마커로 그리기 시도

    내가 알수있는 정보

    • 클러스터 레벨

    • LeafMarker의 tag

    • ClusterMarker의 tag(최상단)

      Clusters svg Hierarchical_clustering_simple_diagram svg

      스크린샷 2024-11-19 16-11-45

    ⇒ 각 클러스터의 노드들의 위치

    각 노드들의 상태(Cluster인지 Leaf인지)와 Cluster라면 해당 클러스터에 어떤 사진들이 포함되어있는지 등을 기억하게 할수 는 있었지만 화면에 그리기 위한 마커의 크기를 구할 방법을 찾지 못함

    • 클러스터링 전후 마커 위치 비교

      스크린샷 2024-11-19 17-21-01 스크린샷 2024-11-19 17-21-09

    클러스터의 노드들의 위치를 기반으로 해당 클러스터의 경계를 구해 마커의 사이즈를 정하려는 시도

    → 현재 지도의 zoom을 알지못해 보류 → 히트맵 도전기

  7. 최종

  • 클러스터 아이콘 수정
  • 클러스터 태그를 해당 클러스터에 포함된 사진들의 id로 수정
  • 각 클러스터 노드가 현재 노드에 포함된 아이템의 정보를 알 수 있도록 아이템의 리스트로 설정

https://github.com/user-attachments/assets/17e00eb1-c765-4f76-be32-19c2622ffca5