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
เปิด/ปิดการเคลื่อนไหวของการขยาย/รวบรวมเมื่อซูม ค่าเริ่มต้นคือปิดใช้งาน ปรับระยะเวลาด้วย zoomAnimationDurationMs (ค่าเริ่มต้น 300ms)
04 · ประสิทธิภาพ
ทำงานลื่นไหลแม้มีหลายพันรายการ
การจัดกลุ่มจะถูกคำนวณในเบื้องหลังและจะสร้างใหม่เมื่อกล้องหยุดเท่านั้น
SAMPLE
24,526