/viz-redgnns

Primary LanguageJavaScript

VIZREDGAE Visualizador red GNSS


Visualizador red GNSS

Las Comunidades Autónomas y el Instituto Geográfico Nacional proporcionan conjuntamente un servicio de posicionamiento diferencial GNSS en tiempo real para toda España. Para generar este servicio se utilizan las estaciones permanentes de las redes GNSS de las Comunidades Autónomas con las que existe un acuerdo de colaboración y de la Red Geodésica Nacional de Referencia de Estaciones Permanentes GNSS (ERGNSS). Algunas de las estaciones de la ERGNSS son compartidas entre el IGN y otras instituciones como Puertos del Estado y Comunidades Autónomas. La utilización de un mayor número de estaciones distribuidas por el territorio aumenta la fiabilidad del sistema al incrementarse la integridad del mismo.

Captura de la pantalla principal

📇 Contenidos

🔹 Funciones del visualizador

👆 Volver

  • Cambios de mapa base: Mapa, Imagen, Híbrido.
  • Buscador de topónimos IGN Search.
  • Información de coordenadas.
  • Localizador.
  • Herramienta para mostrar al norte la cartografía.
  • Botón mostrar/ocultar leyenda.

Al hacer clic sobre el punto que representa a la estación permanente, aparecerá una ventana emergente en la cual podremos ver la información del elemento

  • Código de identificación.
  • Estado de emisión.
  • Información de satélites.
  • Coordenadas.
  • Propietario.
  • Actividad.

En función del estado emisión, se asignan colores a los símbolos:

  • Verde – emitiendo
  • Azul – conexión lenta
  • Naranja – retardo muy alto
  • Rojo – Sin conexión

🔹 Actualización de capas

👆 Volver

Fijado un tiempo en milisegundos, la aplicación consulta un fichero en formato geoJSON con la información actualizada de las estaciones. Accede al fichero, lee su contenido, y sustituye los elementos de la capa por los recién leídos. El refresco no afecta a la aplicación, sino sólo a la capa de estaciones GNSS.

🛠 Configuraciones

👆 Volver

El fichero config.js contiene agrupados todos los parámetros configurables.

📐 Stack de desarrollo

👆 Volver

Para el desarrollo de este visualizador se ha utilizado Visual Studio Code como editor de código. Para la gestión de paquetes:

  • NodeJS Version: 14.16
  • NPM Version: 6.14.11

El desarrollo se ha realizado utilizando módulos ESM. Las funciones y procedimientos se exportan desde un fichero a otro, reutilizando contenido, haciendo el código más modular y organizando mejor la aplicación. Está técnica se conoce como separación de código o code splitting.

Esta es una forma de mejorar el rendimiento de un sitio web es aprovechar el caché del navegador, de manera que se sirvan de la memoria de la computadora o dispositivo los archivos que cambian muy poco (como imágenes, javascript y css) y que el navegador sólo tenga que descargar los archivos que hayan cambiado.

En el ecosistema Javascript, existen ciertas herramientas denominadas automatizadores o bundlers. Se utilizan para generar un sólo archivo .js final donde se guardará todo el código Javascript de nuestra web o aplicación, que leerá el navegador.

Este proyecto utiliza Parcel como empaquetador de aplicaciones web. Está basado en recursos. Un recurso puede ser cualquier archivo, sin embargo, parcel tiene soporte especial para algunos tipos de archivos como JavaScript, CSS, y HTML. Parcel analiza automáticamente las dependencias a las que se hace referencia en estos archivos y los incluye en el paquete de salida.

🔸 Instalación de dependencias / Install Dependencies

👆 Volver

Una vez clonado el proyecto, instalaremos las dependencias. Para este proyecto sólo utilizamos Parcel como dependencia de desarrollo.

npm i

🔸 Arranque del servidor de desarrollo / Run Application

👆 Volver

parcel src/index.html # npm run dev

🔸 Despliegue en producción de la aplicación / Deploy Application

👆 Volver

parcel build src/index.html --public-url ./ # npm run buildv

Parcel utiliza como minificador de HTML htmlnano. Como utilizamos ficheros SVG, añadimos la opción en el fichero de configuración .htmlnanorc.js

module.exports = {
  "minifySvg": false
}

Los ficheros para el despliegue aparecerán en la carpeta dist.

📁 Estructura del código / Code scaffolding

👆 Volver

/
├── assets 🌈               # Recursos
├── dist 📁                  # Generado tras hacer un parcel build
├── src 📦                  # Código fuente.
└── ...

🔸 Repositorio AdminCNIG / CNIG delivery

El fuente válido para el desarrollo se encuentra e esta cuenta de Github. Y su puesta en producción en la web de proyectos de DEVELMAP. Además, cuelgo el desarrollo compilado en el servicor de desarrollo, la máquina CentOS que tengo asignada.

http://10.67.33.171/web/mashups/redgnss/

Por último, subo al repo del CNIG el código

https://github.com/administradorcnig/vis.REDGAE

👀‼❗️ Al repo administradorcnig también subimos la carpeta dist

🚀 Despliegue

👆 Volver

⛲️ Referencias

👆 Volver