‘Flight Dirty’ by Will GoodFellow, Tom Noakes And Greg Sharp
septiembre 1, 2021
La Serrana – Branding – WIP
marzo 23, 2022
Plataforma gestora de datos, indicadores y mapas de visualización sobre la calidad del agua.
Contexto del Proyecto: Monitoreo Ciudadano
El Proyecto de Monitoreo Ciudadano es una iniciativa de la Universidad de los Andes, liderada por la Facultad de Ingeniería y la Facultad de Economía. Su objetivo principal es recolectar datos sobre la calidad del agua en diversas fuentes hídricas de Colombia, con la participación activa de las comunidades locales.
Los datos son capturados mediante sondas instaladas en puntos estratégicos de estas fuentes, y posteriormente organizados en tablas de datos (similar a Excel) por los encargados del proyecto. Esta información, una vez estructurada, es utilizada para análisis internos por investigadores y expertos en la gestión del agua.
Alcance de la Iniciativa de Visualización y Gestión de Datos
Si bien el Proyecto de Monitoreo Ciudadano se enfoca en la recolección y organización de los datos, esta iniciativa se centra en crear una plataforma avanzada de gestión y visualización de datos que pueda ofrecer un mayor nivel de análisis y accesibilidad. El objetivo es gestionar y visualizar los datos de forma dinámica, permitiendo su presentación en gráficos y mapas interactivos que faciliten la interpretación de la información por parte de los usuarios.
Esta plataforma permite
- Gestión avanzada de datos: Los datos provenientes de las tablas organizadas son cargados a la plataforma, donde se gestionan y almacenan en MySQL.
- Visualización interactiva: Se desarrolló un visualizador en Vue.js que permite mostrar los datos de forma geoespacial, facilitando el análisis por medio de mapas dinámicos y gráficos.
- API pública: Ofrece un API de acceso público, permitiendo la integración de los datos con otros sistemas o portales web.
Arquitectura
El sistema está compuesto por una arquitectura backend/frontend. El backend está desarrollado en Laravel y gestiona toda la lógica de datos y su almacenamiento en MySQL. El frontend incluye un visualizador en Vue.js, que puede ser embebido en cualquier sitio web, funcionando como un microfrontend.
- Backend (Laravel): Gestiona la carga de los datos desde tablas y su almacenamiento seguro en la base de datos.
- API Pública: Permite la recepción y el procesamiento de datos provenientes de las sondas instaladas en los sitios de monitoreo.
- Frontend (Vue.js): El visualizador de datos, desarrollado en Vue.js, se puede integrar fácilmente en otros portales, ofreciendo mapas dinámicos con OpenStreetMap.
Flujo de datos
Recolección y Organización: Los datos son recolectados por las sondas y luego organizados en tablas por el equipo de Monitoreo Ciudadano. Estas tablas son cargadas en la plataforma para su gestión.
Cálculo Geoespacial: Utilizando técnicas de geofencing, el sistema calcula las distancias entre las sondas y las ubicaciones predefinidas, como ciudades o regiones, para determinar los puntos que deben mostrarse en el mapa.
Visualización: Los datos son presentados en un mapa interactivo mediante el visualizador, lo que permite a los usuarios explorar los datos de cada sonda en tiempo real, con acceso a métricas como pH, temperatura y conductividad del agua.
Ejemplo de Cálculo de Distancias Geoespaciales
Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.
public function dataInPerimeter( float $latitude = 0, float $longitude = 0, $zoom)
{
$latName = "latitud";
$lonName = "longitud";
/*Como se calcularon los valores*/
// $sql = "((ACOS(SIN(? * PI() / 180) * SIN(" . $latName . " * PI() / 180) + COS(? * PI() / 180) * COS(" .
// $latName . " * PI() / 180) * COS((? - " . $lonName . ") * PI() / 180)) * 180 / PI()) * 60 * ?) as distance";
$km = (40000/pow(2, $zoom))* 2;
$sql = "6371 *acos(
cos( radians(?))*
cos(radians(".$latName."))*
cos(radians(".$lonName.") - radians(?))
+ sin (radians(?))*
sin(radians(".$latName."))
) AS distance";
$query = Registro::whereHas('transferencia', function($query){
$query->where('estado',1);
})
->select('id', 'hg', 'region_id', 'longitud', 'latitud', 'conduct', 'ph','temperatura','od', 'created_at')->selectRaw($sql, [$latitude, $longitude, $latitude])
->havingRaw('distance BETWEEN 0 AND '.$km)
->orderBy('distance', 'ASC')
->get();
return $query;
}
Respuesta JSON del API
El API devuelve los datos en formato JSON, proporcionando información detallada de cada sonda dentro del perímetro definido:
{
"registros": [
{
"id": 62,
"longitud": -74.065282,
"latitud": 4.603333,
"conduct": 10.11,
"ph": 5.24,
"temperatura": 16,
"od": 7.77,
"distance": 0.4493249442694154
},
...
],
"message": "Retrieved successfully"
}
Visualización Geoespacial
El visualizador se puede integrar en cualquier portal web y permite preseleccionar zonas geográficas específicas según las necesidades del sitio web. Por ejemplo, en el portal de la Universidad de los Andes, la plataforma carga automáticamente los datos de la región de Bogotá, mientras que en otras zonas como Samacá, el visualizador se ajusta para mostrar los datos específicos de esa área.
El visualizador, basado en OpenStreetMap, utiliza pines para representar las ubicaciones de las sondas. Los usuarios pueden interactuar con estos pines para obtener información detallada sobre la calidad del agua en cada punto.
Conclusión
La plataforma desarrollada ofrece una solución avanzada para la gestión y visualización de datos ambientales. Con un enfoque modular y flexible, permite a los investigadores y usuarios acceder a datos relevantes sobre la calidad del agua, mientras que facilita la integración de estos datos en múltiples portales web. El proyecto tiene el potencial de escalar y adaptarse a nuevas zonas de monitoreo en el futuro.
