MapConductor문서 / 확장 기능 / 히트맵
히트맵
밀도 데이터를 타일 기반의 래스터 레이어로 그립니다. 프로바이더에 의존하지 않으므로, 지도를 바꿔도 겉모습은 변하지 않습니다.
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의 weight(기본 1.0)를 읽습니다. 인구나 매출 같은 양을 반영시킵니다.
04 · 성능
타일로 그리기
히트맵은 래스터 타일로 생성되기 때문에, 점의 수가 늘어도 오버레이 수는 늘지 않습니다. 샘플에서는 24,526점을 그리고 있습니다.
