MapConductorDokumentation / Erweiterungen / Heatmap
Heatmap
Zeichnet Dichtedaten als eine kachelbasierte Raster-Layer. Da es anbieterunabhängig ist, ändert sich das Erscheinungsbild nicht, wenn die Karte ausgetauscht wird.
ANDROID
com.mapconductor:heatmap
iOS
MapConductorHeatmap
REACT
@mapconductor/react-heatmap
01 · Installation
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 · Verwendung
Ordnen Sie Punkte innerhalb einer Overlay. Verwenden Sie für eine große Anzahl von Punkten eine Komponente für das Masseneinfügen.
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 · Hauptoptionen
Option
Default
Beschreibung
radiusPx
20
Der Unschärferadius jedes Punktes (in Pixeln).
opacity
0.7
Die Deckkraft des gesamten Overlays.
gradient
DEFAULT
Farbzweisung für die Intensität. Haltepunkte können frei definiert werden.
tileSize
512
Die Seite der zu erzeugenden Kachel (in Pixeln).
weightProvider
state.weight
Ermittlung des Gewichts jedes Punktes. Standardmäßig wird das Gewicht jedes HeatmapPointState gelesen (Standard 1.0). Spiegelnde Größen wie Bevölkerung oder Umsatz wider.
04 · Leistung
Als Kachel zeichnen
Da Heatmaps als Rasterkacheln generiert werden, erhöht sich die Anzahl der Overlays nicht, wenn die Anzahl der Punkte zunimmt. Im Beispiel werden 24.526 Punkte gezeichnet.
