MapConductorเอกสาร / ส่วนขยาย / Heatmap
Heatmap
วาดข้อมูลความหนาแน่นเป็นเลเยอร์แรสเตอร์แบบกระเบื้อง เนื่องจากไม่ขึ้นกับผู้ให้บริการ รูปลักษณ์จะไม่เปลี่ยนแปลงแม้ว่าจะสลับแผนที่
ANDROID
com.mapconductor:heatmap
iOS
MapConductorHeatmap
REACT
@mapconductor/react-heatmap
01 · การติดตั้ง
app/build.gradle.kts
implementation("com.mapconductor:heatmap")Package.swift
.package(url: "https://github.com/MapConductor/ios-heatmap", from: "1.3.1"), .product(name: "MapConductorHeatmap", package: "ios-heatmap"),
terminal
npm install @mapconductor/react-heatmap
02 · การใช้งาน
จัดเรียงจุดภายในซ้อนทับ สำหรับจุดจำนวนมาก โปรดใช้ส่วนประกอบสำหรับการเพิ่มจำนวนมาก
HeatmapScreen.kt · Jetpack Compose
val pointStates: List<HeatmapPointState> = remember { buildPointList() }
MapLibreMapView(state = mapState) {
HeatmapOverlay(radiusPx = 20, opacity = 0.7) {
HeatmapPoints(pointStates)
}
}HeatmapView.swift · SwiftUI
let pointStates: [HeatmapPointState] = buildPointList()
MapLibreMapView(state: mapState) {
HeatmapOverlay(state: HeatmapOverlayState(tileSize: 512, radiusPx: 20, opacity: 0.7)) {
HeatmapPoints(pointStates)
}
}HeatmapPage.tsx · React
import { HeatmapOverlay, HeatmapPoints, HeatmapPointState } from '@mapconductor/react-heatmap';
const points = useMemo(
() => DATA.map(([latitude, longitude], i) =>
new HeatmapPointState({ id: `p-${i}`, position: createGeoPoint({ latitude, longitude }) })),
[],
);
<MapLibreMapView2D state={state}>
<HeatmapOverlay>
<HeatmapPoints states={points} />
</HeatmapOverlay>
</MapLibreMapView2D>03 · ตัวเลือกหลัก
Option
Default
คำอธิบาย
radiusPx
20
รัศมีการเบลอของแต่ละจุด (พิกเซล)
opacity
0.7
ความทึบแสงของซ้อนทับทั้งหมด
gradient
DEFAULT
การกำหนดสีตามความเข้ม สามารถกำหนดจุดหยุดได้อย่างอิสระ
tileSize
512
ด้านของกระเบื้องที่จะสร้าง (พิกเซล)
weightProvider
state.weight
วิธีการดึงน้ำหนักของแต่ละจุด ค่าเริ่มต้นคืออ่านค่าน้ำหนักของแต่ละ HeatmapPointState (ค่าเริ่มต้น 1.0) สะท้อนปริมาณ เช่น ประชากรหรือยอดขาย
04 · ประสิทธิภาพ
วาดเป็นกระเบื้อง
เนื่องจาก Heatmap ถูกสร้างเป็นกระเบื้องแรสเตอร์ จำนวนซ้อนทับจะไม่เพิ่มขึ้นแม้จำนวนจุดจะเพิ่มขึ้น ในตัวอย่างนี้วาด 24,526 จุด
