Mapbox 와 SuperCluster : getClusters() returns [], null, empty

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다!

 

지도에 marker를 사용할 때 필수 기능 중 하나가 바로 "클러스터링"입니다.

클러스터링이란 아래와 같이 zoom의 정도에 따라 마커의 수를 조정하는 것입니다.

 

 

Mapbox 지도 라이브러리에서는 SuperCluster를 사용하여 클러스터링을 구현할 수 있습니다.

클러스터링 적용 중에 getClusters() 메소드의 return 값이

계속해서 [], empty array 가 출력되어서 애를 먹었었는데 그 해결과정을 공유하려 합니다.

 

---

 

Q1. cluster 객체가 아직 초기화되지 않아서 [] 가 return 되는 것일까?

const index = new Supercluster({
    radius: 40,
    maxZoom: 16
});
index.load(points);
index.getClusters(bounds, 2);

 

그래서 객체를 초기화 한 뒤에 getClusters() 메소드를 2초 뒤에 실행해 보았습니다.

 

const index = new Supercluster({
    radius: 40,
    maxZoom: 16
});
index.load(points);
setTimeout(() => { index.getClusters(bounds, 2); }, 2000);

 

 

잘 되는 것 같으면서도 간혹가다 empty array 가 리턴되어 

완전한 해결책은 되지 못했습니다!

 

 

Q2. 그렇다면, getClusteres()의 인자에 문제가 있을까?

 

getClusters(bbox: [westLng, southLat, eastLng, northLat], zoom: integer)

For the given bbox array ([westLng, southLat, eastLng, northLat]) and integer zoom, returns an array of clusters and points as GeoJSON Feature objects.

 

npm supercluster 에는 이렇게 딱 한 줄로 getClusteres() 메소드와 그 인자, 결과값에 대해 명명하고 있습니다. (하지만 나에게는 너무나 부족한 설명... ㅠ)

도대체 bbox가 무엇이란 말인가...!

 

BBox 란 Bounding Box의 준말로, 3D 오브젝트의 형태를 모두 포함할 수 있는 최소 크기의 박스를 말한다.

 

해당 정의로 미루어 보았을 때, "그렇다면 marker 들이 위치할 수 있는 최소 크기의 박스겠구나!"

라는 생각이 머리를 스치고 지나가더라구요.

 

그리고 더불어서 supercluster 에서

예시 코드로 bbox 값을 [-180, -85, 180, 85] 로 제시하고 있다는 의미가 결국에는

-180~180, -90~90 인 위경도 전체 값을 아우르는 것이구나! 로 귀결되었습니다.

 

그래서 getClusters() 메소드가 정상적으로 동작하기 위해서는 

index.load(points); > points 좌표 값들이 모두 포함되는 BBox: [westLng, southLat, eastLng, northLat] 를 

getClusters() 의 인자로 제공하면 되는 것이었습니다.

 

다시 한 번 역시 가장 기본이 가장 중요하다를 느끼네요,,

 

 

 

[References]

supercluster

 

SOP 바운딩 박스 — 독학.NET