Heatmap

El módulo MapConductorHeatmap proporciona una superposición de mapa de calor independiente de la implementación del mapa. Renderiza los datos del mapa de calor como una capa raster y funciona con cualquier proveedor de mapa.

Usa mapas de calor cuando cada punto tenga un peso numérico y el usuario necesite comprender la densidad o intensidad en un área en lugar de inspeccionar marcadores individuales.

Instalación

Agrega a tu Package.swift:

.package(url: "https://github.com/MapConductor/ios-heatmap", from: "1.1.0"),

En las dependencias de tu target:

.product(name: "MapConductorHeatmap", package: "ios-heatmap"),

Uso Básico

Usa HeatmapPointView para una pequeña cantidad de puntos o cuando los puntos se declaran naturalmente como contenido SwiftUI dentro de la superposición:

import MapConductorHeatmap

GoogleMapView(state: mapViewState) {
    HeatmapOverlay(
        radiusPx: 20,
        opacity: 0.7
    ) {
        HeatmapPointView(
            position: GeoPoint(latitude: 35.6762, longitude: 139.6503),
            weight: 1.0
        )
        HeatmapPointView(
            position: GeoPoint(latitude: 35.6895, longitude: 139.6917),
            weight: 2.5
        )
    }
}

Puntos en Lote

Para conjuntos de datos grandes, usa HeatmapPoints para agregar todos los puntos en una sola actualización. Esto evita muchas actualizaciones separadas de aparición/desaparición de puntos:

let pointStates: [HeatmapPointState] = [...]

GoogleMapView(state: mapViewState) {
    HeatmapOverlay(radiusPx: 20) {
        HeatmapPoints(pointStates)
    }
}

HeatmapPoint es el valor de datos interno utilizado por el renderizador. En el contenido del mapa, usa HeatmapPointView o HeatmapPoints.

Estado Dinámico

Usa HeatmapOverlayState para controlar las propiedades del mapa de calor en tiempo de ejecución:

struct DynamicHeatmapMap: View {
    @StateObject private var heatmapState = HeatmapOverlayState(
        radiusPx: 20,
        opacity: 0.7
    )
    @StateObject private var mapViewState = GoogleMapViewState()

    var body: some View {
        VStack {
            GoogleMapView(state: mapViewState) {
                HeatmapOverlay(state: heatmapState) {
                    HeatmapPoints(pointStates)
                }
            }

            HStack {
                Text("Radius:")
                Slider(value: .init(
                    get: { Double(heatmapState.radiusPx) },
                    set: { heatmapState.radiusPx = Int($0) }
                ), in: 10...50)

                Text("Opacity:")
                Slider(value: $heatmapState.opacity, in: 0...1)
            }
            .padding()
        }
    }
}

Gradiente Personalizado

let gradient = HeatmapGradient(
    stops: [
        HeatmapGradientStop(position: 0.0, color: UIColor(red: 0, green: 0, blue: 1, alpha: 1)),   // Azul
        HeatmapGradientStop(position: 0.5, color: UIColor(red: 0, green: 1, blue: 0, alpha: 1)),   // Verde
        HeatmapGradientStop(position: 1.0, color: UIColor(red: 1, green: 0, blue: 0, alpha: 1))    // Rojo
    ]
)

let heatmapState = HeatmapOverlayState(gradient: gradient)

HeatmapOverlayState también admite maxIntensity, weightProvider, tileSize, trackPointUpdates y disableTileServerCache a través de sus inicializadores. Úsalos cuando necesites escala de intensidad consistente, ponderación personalizada o comportamiento de caché de tiles para conjuntos de datos que cambian frecuentemente.

Casos de Uso

• Densidad de Población: Visualiza la distribución de la población
• Puntos Conflictivos de Crimen: Muestra la concentración de incidentes delictivos
• Intensidad de Tráfico: Muestra la congestión del tráfico
• Patrones Climáticos: Muestra temperatura o precipitación
• Concentración de Negocios: Visualiza la densidad de negocios
• Uso de Red: Muestra patrones de tráfico de red
• Datos Geográficos: Visualiza cualquier dato numérico basado en ubicación

Consideraciones de Rendimiento

• Radio: Radio más grande = mejor rendimiento pero menos detalle
• Cantidad de Puntos: Limita los puntos a cantidades razonables para un renderizado fluido
• Opacidad: Menor opacidad reduce el desorden visual
• Nivel de Zoom: Ajusta el radio según el nivel de zoom actual
• Actualizaciones en Lote: Prefiere HeatmapPoints para arreglos grandes

Mejores Prácticas

1. Carga Progresiva: Carga los datos en fragmentos para conjuntos de datos grandes
2. Radio Basado en Zoom: Ajusta el radio mientras el usuario hace zoom
3. Esquema de Color: Elige colores que sean significativos para tus datos
4. Actualiza Eficientemente: Agrupa las actualizaciones en lugar de cambios individuales por punto
5. Prueba el Rendimiento: Verifica el renderizado fluido con el volumen de datos esperado
6. Retroalimentación al Usuario: Muestra el estado de carga mientras se procesan conjuntos de datos grandes