[GIS] 웹지도 마커 클러스터링

마커 클러스터링이란?

마커 클러스터링은 웹 지도의 마커가 많아질 때 발생하는 성능 저하와 시인성 문제를 해결하기 위한 기법입니다. 지도에 많은 마커가 동시에 나타나면, 마커가 겹쳐서 보이기 어려워지고 지도 렌더링 속도가 느려질 수 있습니다. 클러스터링을 통해 가까운 위치에 있는 마커들을 하나의 그룹으로 묶어줌으로써 이러한 문제를 해결할 수 있습니다.

기본 원리

마커 클러스터링은 지도상의 마커들이 서로 가까이 있을 때 이를 그룹화하여 하나의 클러스터로 표시합니다. 사용자가 지도를 확대하거나 축소할 때, 클러스터는 자동으로 재구성되어 시인성과 성능을 모두 개선합니다. 이 과정에서 ClusteringKey 인터페이스를 구현한 키를 사용해 마커의 위치를 정의하고, 클러스터링의 기준을 설정합니다.

클러스터러 생성과 데이터 추가

Clusterer 객체는 Clusterer.Builder를 통해 생성됩니다. 이 객체는 마커 데이터를 받아 클러스터를 형성합니다. 예를 들어, 여러 마커 데이터를 클러스터러에 추가할 때는 add() 또는 addAll() 메서드를 사용합니다.

Clusterer<ItemKey> clusterer = new Clusterer.Builder<ItemKey>().build();
clusterer.add(new ItemKey(1, new LatLng(37.372, 127.113)), null);

지도 객체와의 연동

Clusterer 객체의 map 속성에 지도 객체를 지정하면, 지도 줌 레벨에 따라 클러스터링된 마커가 자동으로 나타나며, 클러스터를 클릭하면 해당 클러스터가 확대됩니다.

clusterer.setMap(naverMap);

클러스터링 옵션

• 클러스터링 거리: 화면 상에서 마커들이 얼마나 가까이 있을 때 클러스터링할지를 결정합니다. 예를 들어, 클러스터링 거리를 20DP로 설정하면 그 거리 이내의 마커들이 클러스터링됩니다.
• 최소 및 최대 줌 레벨: 클러스터링이 적용될 최소 및 최대 줌 레벨을 설정합니다.
• 애니메이션: 클러스터링 시 애니메이션 효과를 적용할지 여부를 결정합니다.

builder.screenDistance(20).minZoom(4).maxZoom(16).animate(false);

마커 커스터마이징

클러스터와 단말 마커를 커스터마이징하여 각 마커의 아이콘이나 클릭 이벤트 등을 설정할 수 있습니다. 예를 들어, 클러스터의 크기나 데이터의 ID에 따라 마커 아이콘을 변경할 수 있습니다.

OverlayImage[] icons = { MarkerIcons.BLUE, MarkerIcons.GREEN, MarkerIcons.RED, MarkerIcons.YELLOW };
builder.clusterMarkerUpdater(new DefaultClusterMarkerUpdater() {
    @Override
    public void updateClusterMarker(@NonNull ClusterMarkerInfo info, @NonNull Marker marker) {
        if (info.getSize() < 3) {
            marker.setIcon(MarkerIcons.CLUSTER_LOW_DENSITY);
        } else {
            marker.setIcon(MarkerIcons.CLUSTER_MEDIUM_DENSITY);
        }
    }
}).leafMarkerUpdater(new DefaultLeafMarkerUpdater() {
    @Override
    public void updateLeafMarker(@NonNull LeafMarkerInfo info, @NonNull Marker marker) {
        ItemKey key = (ItemKey)info.getKey();
        marker.setIcon(icons[key.id % icons.length]);
        marker.setOnClickListener(o -> {
            clusterer.remove(key);
            return true;
        });
    }
});

고급 클러스터링 전략

Clusterer.ComplexBuilder를 사용하면 화면상 거리 외의 기준으로 클러스터링하는 등 복잡한 전략을 설정할 수 있습니다. 예를 들어, 줌 레벨에 따라 클러스터링 기준 거리를 다르게 하거나 태그가 동일할 때만 클러스터링하도록 설정할 수 있습니다.

complexBuilder.thresholdStrategy(zoom -> {
    if (zoom <= 11) {
        return 0;
    } else {
        return 70;
    }
}).distanceStrategy(new DistanceStrategy() {
    @Override
    public double getDistance(int zoom, @NonNull Node node1, @NonNull Node node2) {
        if (zoom <= 9) {
            return -1;
        } else if (zoom <= 13) {
            if (Objects.equals(node1.getTag(), node2.getTag())) {
                return -1;
            } else {
                return 1;
            }
        } else {
            return new DefaultDistanceStrategy().getDistance(zoom, node1, node2);
        }
    }
});

이와 같이 마커 클러스터링을 통해 많은 마커를 효율적으로 관리하고, 지도의 시인성을 높일 수 있습니다.