MapConductorDocumentación / Extensiones / Heatmap
Heatmap
Dibuja datos de densidad como una capa de ráster basada en mosaicos. Al ser independiente del proveedor, el aspecto no cambia si se cambia el mapa.
ANDROID
com.mapconductor:heatmap
iOS
MapConductorHeatmap
REACT
@mapconductor/react-heatmap
01 · Instalación
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 · Uso
Coloque puntos dentro de una superposición. Para una gran cantidad de puntos, utilice el componente para inserción masiva.
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 · Opciones principales
Option
Default
Descripción
radiusPx
20
El radio de desenfoque de cada punto (en píxeles).
opacity
0.7
La opacidad de toda la superposición.
gradient
DEFAULT
Asignación de colores a la intensidad. Se pueden definir libremente los puntos de parada.
tileSize
512
El lado de los mosaicos que se generarán (en píxeles).
weightProvider
state.weight
Cómo se obtiene el peso de cada punto. De forma predeterminada, se lee el peso de cada HeatmapPointState (predeterminado 1.0). Refleja cantidades como población o ventas.
04 · Rendimiento
Dibujar como mosaico
Como los mapas de calor se generan como mosaicos de ráster, la cantidad de superposiciones no aumenta a medida que aumenta la cantidad de puntos. En el ejemplo se dibujan 24.526 puntos.
