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.1.4"), .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 点を描画しています。
