Componentes de Mapa

Componentes de mapa con Leaflet, deck.gl y componentes personalizados para visualizacion geo-espacial — mapas de calor, geocercas, lineas de tiempo animadas y planos de planta.

Última actualización: 2025-02-18

Componentes de Mapa

El sistema de mapas de Certexi proporciona un conjunto rico de componentes para renderizar eventos logisticos, geocercas de almacen y lineas de tiempo animadas en mapas interactivos.

certexi.com/app/geo/heatmap
Loading interactive demo...

Mapa de densidad de puntos — 500 eventos logisticos a traves de centros de almacen con filtrado por tipo.

Inventario de Componentes

ComponenteTecnologiaDescripcion
EventsMapdeck.glMapa principal con ScatterplotLayer, HeatmapLayer, TextLayer
WhmsGeofenceMapLeafletPoligonos de geocercas de almacen con drill-down al hacer clic
FloorPlanCanvasKonva.jsPlano de planta interior con superposicion de poligonos de slots
TimeNavigatorReactControl de ventana temporal con presets y modo en vivo
GeoTimelinePlayerdeck.glReproduccion animada de eventos con barra de progreso

Linea de Tiempo Animada

Observe como los eventos logisticos se desarrollan a lo largo del tiempo. La barra de progreso permite saltar a cualquier momento en una ventana de 48 horas.

certexi.com/app/geo/timeline
Loading interactive demo...

Reproduccion animada de 48 horas con controles de velocidad de 0.5x a 4x.

Poligonos de Geocerca

Defina los limites del almacen como poligonos. Haga clic en cualquier zona para ver metricas de utilizacion y profundizar en el detalle a nivel de slot.

certexi.com/app/geo/geofence
Loading interactive demo...

5 geocercas de almacen con capacidad, utilizacion y metadatos de tipo de zona.

Controles de Mapa

<Card className="w-80">
  <CardHeader className="pb-2">
    <CardTitle className="text-sm">Controles de Mapa</CardTitle>
    <CardDescription>Ventana temporal y opciones de visualizacion</CardDescription>
  </CardHeader>
  <CardContent className="space-y-3">
    <div className="flex gap-1 flex-wrap">
      <Badge variant="outline" className="cursor-pointer">1h</Badge>
      <Badge variant="outline" className="cursor-pointer">3h</Badge>
      <Badge className="bg-blue-500 text-white cursor-pointer">6h</Badge>
      <Badge variant="outline" className="cursor-pointer">12h</Badge>
      <Badge variant="outline" className="cursor-pointer">24h</Badge>
      <Badge variant="outline" className="cursor-pointer">7d</Badge>
    </div>
    <div className="space-y-1.5">
      <div className="flex justify-between text-xs">
        <span className="text-muted-foreground">Modo de Visualizacion</span>
      </div>
      <div className="flex gap-1">
        <Button size="sm" variant="outline" className="flex-1 text-xs h-7">Puntos</Button>
        <Button size="sm" className="flex-1 text-xs h-7">Mapa de calor</Button>
        <Button size="sm" variant="outline" className="flex-1 text-xs h-7">Clusters</Button>
      </div>
    </div>
    <div className="flex items-center justify-between text-xs">
      <span className="text-muted-foreground">Eventos en vista</span>
      <Badge variant="secondary">2,847</Badge>
    </div>
  </CardContent>
</Card>

Modos de Renderizado

El mapa selecciona automaticamente el modo de renderizado optimo segun la densidad de eventos:

Cantidad de EventosModoTecnologiaRendimiento
< 10,000PuntosScatterplotLayer~50ms renderizado
10k-50kClustersMarcadores agrupados~150ms renderizado
50k+Mapa de calorGPU HeatmapLayer~200ms renderizado
ℹ️

Cero Marcadores DOM

Todo el renderizado usa capas WebGL de deck.gl. Sin marcadores basados en DOM, no hay re-renders de React durante operaciones de desplazamiento y zoom.

Tarjeta de Evento

Cada evento del mapa puede inspeccionarse con metadatos completos:

<Card className="w-72">
  <CardHeader className="pb-2">
    <div className="flex items-center justify-between">
      <Badge className="bg-blue-500 text-white text-[10px]">ENTRADA</Badge>
      <span className="text-[10px] text-muted-foreground font-mono">14:32:07 UTC</span>
    </div>
    <CardTitle className="text-sm mt-1">TU-2025-00042</CardTitle>
    <CardDescription>Carlos Mendez — Almacen Alpha</CardDescription>
  </CardHeader>
  <CardContent className="space-y-2">
    <div className="flex justify-between text-xs">
      <span className="text-muted-foreground">Ubicacion</span>
      <span className="font-mono">25.6714, -100.3097</span>
    </div>
    <div className="flex justify-between text-xs">
      <span className="text-muted-foreground">Evidencia</span>
      <span>3 fotos, 1 escaneo</span>
    </div>
    <div className="flex gap-1 pt-1">
      <Button size="sm" variant="outline" className="flex-1 text-xs h-7">Detalles</Button>
      <Button size="sm" className="flex-1 text-xs h-7">Linea de tiempo</Button>
    </div>
  </CardContent>
</Card>

Integracion

import { EventsMap } from '@/components/whms/EventsMap';
import { TimeNavigator } from '@/components/whms/TimeNavigator';
import { WhmsGeofenceMap } from '@/components/whms/WhmsGeofenceMap';

// Compose map with time controls
<div className="flex flex-col h-screen">
  <TimeNavigator
    onTimeWindowChange={setTimeWindow}
    presets={['1h', '3h', '6h', '12h', '24h']}
  />
  <EventsMap
    events={events}
    timeWindow={timeWindow}
    renderMode="auto"
  />
</div>

Relacionado