Реалізація кластеризації маркерів на карті мобільного додатку

Реалізація кластеризації маркерів на карті мобільного додатку

Карта з 300 маркерами без кластеризації — це нечитаємое месиво іконок і лаг при зуме. Кластеризація групирує близлежачі точки в один об'єкт з числом, яке розкривається при наближенні. Реалізація залежить від обраного картографічного SDK.

Google Maps: Maps SDK Clustering Utility

Для Google Maps використовується бібліотека maps-utils:

// build.gradle
implementation("com.google.maps.android:android-maps-utils:3.8.2")

class ClusteringActivity : AppCompatActivity(), OnMapReadyCallback {
    private lateinit var clusterManager: ClusterManager<MyClusterItem>

    override fun onMapReady(googleMap: GoogleMap) {
        clusterManager = ClusterManager(this, googleMap)
        googleMap.setOnCameraIdleListener(clusterManager)
        googleMap.setOnMarkerClickListener(clusterManager)

        // Кастомний рендерер
        clusterManager.renderer = CustomClusterRenderer(this, googleMap, clusterManager)

        // Додавання точок
        val items = locations.map { MyClusterItem(it.lat, it.lng, it.title) }
        clusterManager.addItems(items)
        clusterManager.cluster()
    }
}

data class MyClusterItem(
    private val lat: Double,
    private val lng: Double,
    private val title: String
) : ClusterItem {
    override fun getPosition() = LatLng(lat, lng)
    override fun getTitle() = title
    override fun getSnippet() = null
    override fun getZIndex() = 0f
}

Кастомний вид кластера

class CustomClusterRenderer(
    context: Context,
    map: GoogleMap,
    clusterManager: ClusterManager<MyClusterItem>
) : DefaultClusterRenderer<MyClusterItem>(context, map, clusterManager) {

    override fun onBeforeClusterItemRendered(item: MyClusterItem, markerOptions: MarkerOptions) {
        markerOptions.icon(BitmapDescriptorFactory.fromResource(R.drawable.custom_pin))
    }

    override fun onBeforeClusterRendered(
        cluster: Cluster<MyClusterItem>,
        markerOptions: MarkerOptions
    ) {
        val count = cluster.size
        val bitmap = createClusterBitmap(count)
        markerOptions.icon(BitmapDescriptorFactory.fromBitmap(bitmap))
    }

    private fun createClusterBitmap(count: Int): Bitmap {
        val size = 80
        val bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(bitmap)
        val bgPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { color = Color.parseColor("#3498DB") }
        canvas.drawCircle(size / 2f, size / 2f, size / 2f - 2f, bgPaint)
        val textPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
            color = Color.WHITE
            textSize = 28f
            textAlign = Paint.Align.CENTER
        }
        canvas.drawText(count.toString(), size / 2f, size / 2f + 10f, textPaint)
        return bitmap
    }
}

MapKit (Яндекс): ClusterizedPlacemarkCollection

val clusterizedCollection = map.mapObjects.addClusterizedPlacemarkCollection(
    object : ClusterListener {
        override fun onClustersAdded(clusters: MutableCollection<Cluster>) {
            clusters.forEach { cluster ->
                cluster.appearance.setIcon(
                    TextImageProvider(buildClusterImage(cluster.size))
                )
            }
        }
    }
)

// Додавання точок
val placemarks = locations.map { Point(it.lat, it.lng) }
val options = PlacemarkCreationContext()
clusterizedCollection.addPlacemarks(placemarks, ImageProvider.fromResource(context, R.drawable.pin), options)
clusterizedCollection.clusterPlacemarks(clusterRadius = 60.0, minZoom = 15)

clusterRadius — радіус в пікселях для об'єднання. minZoom — починаючи з якого рівня зума точки показуються окремо.

Mapbox: вбудована кластеризація через GeoJSON

Mapbox підтримує кластеризацію на рівні джерела даних — все відбувається на стороні рендерера без додаткових бібліотек:

style.addSource(
    GeoJsonSource.Builder("locations")
        .featureCollection(featureCollection)
        .cluster(true)
        .clusterMaxZoom(14)
        .clusterRadius(50)
        .build()
)

// Шар кластерів
style.addLayer(
    CircleLayer("clusters", "locations").apply {
        filter(has("point_count"))
        circleColor(
            step(get("point_count"),
                color(Color.parseColor("#51bbd6")),
                stop { literal(100); color(Color.parseColor("#f1f075")) },
                stop { literal(750); color(Color.parseColor("#f28cb1")) }
            )
        )
        circleRadius(
            step(get("point_count"),
                literal(20),
                stop { literal(100); literal(30) },
                stop { literal(750); literal(40) }
            )
        )
    }
)

// Шар з числом внутри кластера
style.addLayer(
    SymbolLayer("cluster-count", "locations").apply {
        filter(has("point_count"))
        textField(get("point_count_abbreviated"))
        textSize(12.0)
        textColor(Color.WHITE)
    }
)

// Шар одиночних точок
style.addLayer(
    SymbolLayer("unclustered-point", "locations").apply {
        filter(not(has("point_count")))
        iconImage("custom-pin")
    }
)

Підхід через GeoJSON-джерело масштабується до десятків тисяч точок без помітного падіння FPS — рендеринг повністю на GPU.

Тап по кластеру: zoom до меж

При кліку по кластеру карта має наближуватися так, щоб всі точки кластера вписалися в екран:

mapView.mapboxMap.addOnMapClickListener { point ->
    val features = mapView.mapboxMap.queryRenderedFeatures(
        ScreenCoordinate(point.x, point.y),
        RenderedQueryOptions(listOf("clusters"), null)
    )
    features.value?.firstOrNull()?.let { feature ->
        val clusterId = feature.id()?.toLongOrNull() ?: return@addOnMapClickListener true
        (style.getSource("locations") as? GeoJsonSource)?.getClusterExpansionZoom(
            Feature.fromGeometry(feature.geometry()!!)
        ) { result ->
            result.value?.let { zoom ->
                mapView.mapboxMap.setCamera(
                    CameraOptions.Builder()
                        .center(feature.geometry() as? Point)
                        .zoom(zoom.toDouble() + 0.5)
                        .build()
                )
            }
        }
    }
    true
}

Строки

1–3 дні. Стандартна кластеризація — 1 день. Кастомний вид кластерів + анімація розкриття + тап з зумом — 2–3 дні. Вартість розраховується індивідуально.