MapConductorदस्तावेज़ीकरण / एक्सटेंशन / मार्कर क्लस्टरिंग
बड़ी संख्या में मार्कर लगाएं
पास के मार्करों को स्वचालित रूप से क्लस्टर में समूहित करता है और ज़ूम इन करने पर विस्तारित करता है। किसी भी प्रदाता के मानचित्र दृश्य पर वही कोड काम करता है।
ANDROID
com.mapconductor:marker-clustering
iOS
MapConductorMarkerCluster
REACT
@mapconductor/react-marker-clustering
01 · स्थापना
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 · उपयोग
बस मार्कर की सरणी को क्लस्टर समूह में पास करें। मार्कर की स्थिति वस्तु सामान्य वस्तु के समान है, इसे बदलने की आवश्यकता नहीं है।
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 · मुख्य विकल्प
Option
Default
विवरण
clusterRadiusPx
90.0
क्लस्टर करने के लिए दूरी (स्क्रीन पिक्सल)। इसे छोटा करने पर विभाजन अधिक बारीक हो जाता है।
minClusterSize
3
क्लस्टर के रूप में दिखाने के लिए न्यूनतम मार्कर संख्या। इससे कम होने पर व्यक्तिगत मार्कर के रूप में रहते हैं।
clusterIconProvider
circle badge
क्लस्टर संख्या के अनुसार एक आइकन लौटाता है। डिफ़ॉल्ट गोलाकार बैज है।
onClusterClick
null
क्लस्टर के टैप को प्राप्त करता है। इसका उपयोग ज़ूम इन के लिए करना आम है।
enableZoomAnimation
false
ज़ूम के दौरान विस्तार/समेटने को एनिमेट करना ON/OFF। डिफ़ॉल्ट अक्षम है। समय अवधि zoomAnimationDurationMs (डिफ़ॉल्ट 300ms) से समायोजित होती है।
04 · प्रदर्शन
हजारों की संख्या में भी चिकना
क्लस्टरिंग बैकग्राउंड में गणना करता है और केवल कैमरा रुकने पर पुनर्निर्माण करता है।
SAMPLE
24,526