MapConductorDokumentation / Erweiterungen / Marker-Clustering
Viele Marker platzieren
Nah beieinanderliegende Marker werden automatisch zu Clustern zusammengefasst und beim Vergrößern aufgeklappt. Funktioniert mit Kartenansichten aller Anbieter mit demselben Code.
ANDROID
com.mapconductor:marker-clustering
iOS
MapConductorMarkerCluster
REACT
@mapconductor/react-marker-clustering
01 · Installation
app/build.gradle.kts
implementation("com.mapconductor:marker-clustering")Package.swift
.package(url: "https://github.com/MapConductor/ios-marker-cluster", from: "1.3.1"), .product(name: "MapConductorMarkerCluster", package: "ios-marker-cluster"),
terminal
npm install @mapconductor/react-marker-clustering
02 · Verwendung
Übergeben Sie einfach ein Array von Markern an eine Clustergruppe. Die Zustandsobjekte der Marker selbst sind identisch mit den üblichen, keine Änderung erforderlich.
ClusteredMap.kt · Jetpack Compose
val markerStates: List<MarkerState> = remember { buildMarkerList() }
val clusterState = remember {
MarkerClusterGroupState(
clusterRadiusPx = 90.0,
minClusterSize = 5,
onClusterClick = { cluster -> /* handle tap */ },
)
}
MapLibreMapView(state = mapState) {
MarkerClusterGroup(state = clusterState, markers = markerStates)
}ClusteredMap.swift · SwiftUI
@State private var clusterState = MarkerClusterGroupState(
clusterRadiusPx: 90,
minClusterSize: 5,
onClusterClick: { cluster in /* handle tap */ }
)
MapLibreMapView(state: mapState) {
MarkerClusterGroup(state: clusterState, markers: markerStates)
}ClusteredMap.tsx · React
import { MarkerClusterGroup } from '@mapconductor/react-marker-clustering';
import { MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
<MapLibreMapView2D state={state}>
<MarkerClusterGroup
markers={markers}
minClusterSize={2}
clusterRadiusPx={80}
enableZoomAnimation
onClusterClick={cluster => console.log(cluster.count)}
/>
</MapLibreMapView2D>03 · Wichtige Optionen
Option
Default
Beschreibung
clusterRadiusPx
90.0
Abstand zum Zusammenfassen in Clustern (Bildschirmpixel). Kleinere Werte führen zu feinerer Unterteilung.
minClusterSize
3
Minimale Anzahl von Markern für die Anzeige als Cluster. Weniger werden als einzelne Marker angezeigt.
clusterIconProvider
circle badge
Gibt ein Icon entsprechend der Clusteranzahl zurück. Standard ist ein kreisförmiges Abzeichen.
onClusterClick
null
Empfängt Tipps auf Clustern. Wird üblicherweise zum Vergrößern verwendet.
enableZoomAnimation
false
Animation von Erweitern/Zusammenfassen beim Zoomen ein/aus. Standard ist deaktiviert. Die Dauer wird mit zoomAnimationDurationMs (Standard 300 ms) angepasst.
04 · Leistung
Auch bei mehreren Tausend flüssig
Clustering wird im Hintergrund berechnet und nur beim Stillstand der Kamera neu aufgebaut.
SAMPLE
24,526