Unidad 7. Rendimiento y formatos cloud-native

Tiempo: cuatro horas presenciales y cinco horas autónomas. Producto: una ruta de entrega optimizada, PMTiles para vector o COG para ráster, documentada con STAC, HTTP Range y mediciones reproducibles. Todo el grupo consume ambos formatos; cada proyecto genera y justifica una sola ruta.

Resultados de aprendizaje

Al finalizar podrás:

Por qué no basta con un archivo pequeño

El rendimiento de un mapa depende de bytes, solicitudes, caché, tamaño de ventana, zoom, estilo, CPU/GPU, red y estrategia de entrega. Un archivo reducido puede seguir siendo lento si el navegador descarga más de lo que necesita; un archivo grande puede resultar útil si se lee por partes y usa niveles de detalle. Por eso esta unidad compara una cadena completa, no solo tamaños en disco.

GeoJSON entrega entidades completas en un documento JSON. Es fácil de inspeccionar y útil para colecciones pequeñas, pero un cliente descarga todo el archivo antes de filtrar o dibujar. MVT codifica entidades vectoriales por tesela. Una tesela divide el espacio en cuadros para cada nivel de zoom; el cliente pide solo los cuadros que cubren su vista. PMTiles empaqueta muchas teselas MVT en un solo archivo y usa un índice interno para ubicar los bytes de cada tesela.

Un GeoTIFF convencional puede contener un ráster completo en un orden poco útil para la web. Un COG organiza bloques internos y overviews, versiones de menor resolución, para que el cliente lea primero una aproximación y solicite detalle solo al acercarse. WMS sigue siendo una alternativa de compatibilidad: el servidor renderiza una imagen por solicitud, mientras COG entrega bytes de un activo y el cliente lo interpreta.

Ruta Entrega Quién simboliza Primer uso
GeoJSON Documento completo Cliente Colección pequeña, inspección y enseñanza
MVT Tesela vectorial Cliente Mapa vectorial por vista y zoom
PMTiles Archivo de teselas Cliente Vector estático con Range
WMS Imagen renderizada Servidor Compatibilidad y mapa de servidor
GeoTIFF Archivo ráster completo Cliente o escritorio Intercambio y análisis base
COG Bloques y overviews Cliente Ráster remoto con Range

Ruta vectorial: GeoJSON, MVT y PMTiles

La ruta vectorial del curso es:

GeoJSON sintético -> Planetiler -> PMTiles -> Nginx o Pages -> protocolo PMTiles -> MapLibre

Planetiler recibe data/fixtures/vector/referencia.geojson y el esquema scripts/planetiler-referencia.yml. El esquema define zoom mínimo, zoom máximo, capa y atributos que se conservan. Cada atributo adicional ocupa bytes en cada tesela; no copies columnas que el mapa no usa. La simplificación reduce vértices según zoom para que una geometría distante no cargue el mismo detalle que una geometría cercana. Una simplificación excesiva deforma límites; una nula puede transferir detalle invisible.

Los niveles de zoom deben responder a una pregunta de uso: a baja escala importa la forma general y a alta escala pueden aparecer detalles o etiquetas. Un punto no requiere la misma generalización que un polígono complejo. El fixture es pequeño, pero el esquema documenta la decisión que se mediría con un dataset mayor.

npm run data:build:pmtiles

El script ejecuta Planetiler y luego el CLI PMTiles fijado por digest para verificar el archivo. El resultado aprobado queda en data/fixtures/cloud/referencia.pmtiles.

Ruta ráster: GeoTIFF y COG

La ruta ráster del curso es:

GeoTIFF sintético -> GDAL COG -> Nginx o Pages -> protocolo COG -> MapLibre

Un bloque es una porción interna del ráster. Un overview es una versión reducida que permite responder rápidamente cuando la vista cubre un área grande. La compresión reduce bytes almacenados y transferidos, pero puede aumentar tiempo de CPU o afectar valores según el método. El builder del curso usa bloques de 256 y compresión DEFLATE, decisiones explícitas y reproducibles, no una receta universal.

npm run data:build:cog

El script usa GDAL fijado por digest, ejecuta gdal_translate -of COG e inspecciona la salida con gdalinfo. El activo resultante queda en data/fixtures/cloud/referencia.cog.tif. Para un ráster real, también debes documentar NoData, bandas, resolución, fecha, CRS y el efecto de reamostrar.

HTTP Range, CORS y caché

PMTiles y COG necesitan pedir rangos de bytes. Una solicitud correcta envía una cabecera como Range: bytes=0-15. El servidor debe responder 206 Partial Content, Accept-Ranges: bytes y un Content-Range que indique qué fragmento entregó. Si devuelve 200 con el archivo completo, el cliente puede perder la ventaja de formato cloud-native.

CORS autoriza que una página en un origen solicite recursos en otro. El Nginx local permite http://localhost:4173 y expone cabeceras Range necesarias. GitHub Pages entrega sus propios activos con una política distinta; cada hosting debe probarse después de desplegar, no asumirse por haber funcionado localmente.

La caché reduce solicitudes repetidas. No es permiso para precargar una ciudad, todos los zooms o datos offline desde un proveedor público de teselas. Respeta las cabeceras de caché y las políticas del proveedor. OSM es contexto visual de mejor esfuerzo; no se usa para benchmarks masivos ni para la ruta de entrega del proyecto.

npm run test:range

Este comando valida PMTiles y COG contra Nginx con 206, Range y CORS. Si falla, revisa servidor, origen, cabeceras y ruta antes de culpar al formato.

STAC: catálogo, no servidor

STAC describe activos mediante documentos JSON enlazados. El Catalog del curso enlaza la Collection referencia; el Item describe extensión, fecha y assets. data/fixtures/stac/item-referencia.json enlaza el COG y PMTiles generados. STAC responde “qué activo existe y dónde se describe”; Nginx o Pages entrega los bytes; MapLibre los visualiza. Ninguno de esos tres roles es intercambiable.

npm run validate:stac

El validador comprueba Catalog, Collection, Item y que los enlaces de assets locales existan. Si un builder reemplaza un archivo, revisa su checksum y el manifiesto antes de actualizar STAC.

Medir sin prometer más de lo observado

El benchmark HTTP ejecuta al menos cinco solicitudes por ruta y escribe mediana, bytes y estado. Para vector compara GeoJSON y PMTiles; para ráster compara WMS y COG. La medición indica transporte local, no tiempo total de renderizado ni experiencia de una red móvil.

npm run benchmark -- --route vector --runs 5
npm run benchmark -- --route raster --runs 5

El benchmark de navegador abre Chromium cinco veces para OGC API, PMTiles y COG. Mide hasta que MapLibre registra la fuente y guarda recursos observados por la Performance API. Incluye carga de script, WebGL, red y ejecución del navegador; no representa Safari real ni todas las condiciones de hardware.

npm run benchmark:browser

Los reportes viven en .reports/ y no se versionan. Registra checksum, equipo, navegador, fecha, caché fría o caliente, número de solicitudes, bytes, mediana y limitaciones. El objetivo curricular de reducción del 30 % requiere una decisión comando imprimió una mediana.

Práctica común y ruta elegida

Todo el grupo debe generar, validar y visualizar ambos activos:

npm run data:build:pmtiles
npm run data:build:cog
npm run validate:cloud
npm run test:range

Después, cada proyecto elige una ruta:

Abre el cliente MapLibre mantenido referencia textual de las entidades; un ráster requiere además resumen, leyenda o

Errores frecuentes

Autoevaluación

  1. ¿Qué diferencia hay entre una tesela MVT y un archivo PMTiles?
  2. ¿Qué hace un overview y por qué ayuda a un COG?
  3. ¿Qué cabeceras demuestran una respuesta Range correcta?
  4. ¿Qué describe STAC y qué componente entrega los bytes?
  5. ¿Qué diferencia hay entre benchmark HTTP y benchmark de navegador?
  6. ¿Qué información justificarías para elegir la ruta vectorial o ráster?

Esta unidad prepara la ruta optimizada de la Entrega 3.

Diagnóstico

Explica qué bytes solicita un cliente PMTiles o COG antes de dibujar una vista, qué cabecera confirma esa solicitud y qué medición usarías para diferenciar transporte HTTP de disponibilidad de una fuente en MapLibre. Justifica la ruta de tu proyecto con una limitación explícita.