Mapa interactivo de puntos de cargas para vehículos eléctricos en Barcelona

GRADO DE INGENIERÍA DE GEOINFORMACIÓN Y GEOMÁTICA TRABAJO FIN DE GRADO MAPA INTERACTIVO DE PUNTOS DE CARGA PARA COCHES ELÉCTRICOS EN BARCELONA Proyectista: Kaihang Lin Directora: M Amparo Núñez Andrés Convocatoria: Febrero 2025 Mapa interactivo de puntos de carga para coches eléctricos en Barcelona 1 Resumen El objetivo de este proyecto es estudiar la infraestructura de los puntos de carga para vehículos eléctricos en el área metropolitana de Barcelona y desarrollar un mapa interactivo que facilite la localización de estos puntos. Para alcanzar este objetivo, se ha implementado una base de datos espacial empleado PostGis sobre PostgreSQL. Para gestionar la base de datos de los puntos de carga se ha empleado PgAdmin IV. Además, empleamos GeoServer para la implementación de servicios WFS (Web Feature Service) y, finalmente, utilizamos la biblioteca de JavaScript Leaflet para acceder a dichos servicios a través de un visualizador web. El visualizador implementado, además de mostrar los puntos de cargas, ofrece una interfaz intuitiva que permite a los usuarios ingresar coordenadas y un radio específico para encontrar los puntos de carga dentro de esa área. De esta manera, se busca mejorar la accesibilidad y la comodidad para los usuarios de vehículos eléctricos en Barcelona. Mapa interactivo de puntos de carga para coches eléctricos en Barcelona 2 ÍNDICE 1. Introducción ........................................................................................................................ 3 1.1 Motivación ............................................................................................................... 3 1.2 Objetivo ................................................................................................................... 3 2 Planes de control de polución por movilidad ...................................................................... 4 2.1 Zonas de bajas emisiones en Barcelona................................................................... 4 2.2 Plan Move III ........................................................................................................... 5 3 Estudios de puntos de cargas .............................................................................................. 6 3.1 Estudio de puntos de carga en Europa ..................................................................... 6 3.2 Estudio de puntos de cargas eléctricas en España ................................................... 8 3.3 Estudio de puntos de carga en Barcelona ................................................................ 9 4 Obtención y tratamiento de datos...................................................................................... 12 4.1 Tratamiento y preparación de los datos ................................................................. 12 4.2 Implementación del servicio WFS......................................................................... 13 5 Descripción del visor ........................................................................................................ 15 5.1 Descripción de Leaflet ........................................................................................... 15 5.2 Descripción del visor ............................................................................................. 16 5.3 Descripción del código del visor ........................................................................... 18 6 Análisis de sostenibilidad.................................................................................................. 24 6.1 Punto de vista ambiental ........................................................................................ 24 6.2 Punto de vista económica ...................................................................................... 25 6.3 Punto de vista social .............................................................................................. 25 7 Conclusión ........................................................................................................................ 26 Bibliografía .............................................................................................................................. 27 ANEXO: Código del visor ....................................................................................................... 28 1. Introducción Este proyecto consiste en el desarrollo un visor web interactivo centrado en los puntos de carga eléctrica de la ciudad de Barcelona. La idea surge de la necesidad de facilitar la transición hacia una movilidad más sostenible, ayudando a los usuarios a localizar de manera rápida y sencilla los puntos de carga disponibles. Con la implementación del plan de zonas de bajas emisiones (ZBE) en Barcelona, se espera un aumento significativo en la adopción de vehículos eléctricos por parte de los consumidores, lo que incrementará la necesidad de localizar puntos de carga de forma eficiente. Este proyecto busca responder a esa demanda, ofreciendo una herramienta útil y accesible para los ciudadanos. El proyecto se ha desarrollado reutilizando datos abiertos y empleando únicamente software de código abierto, lo que garantiza su accesibilidad y flexibilidad. La herramienta permitirá consultar información detallada sobre los puntos de carga, como ubicación, tipo de cargador, capacidad y estado de funcionamiento, contribuyendo al uso eficiente de esta infraestructura en la ciudad. 1.1 Motivación La motivación principal es por mi afición al coche y por ser un apasionante de la tecnología de última generación. Justamente estamos en una época de cambio de coche de combustión al coche eléctrico, pero como he mencionado anteriormente, hoy en día hay muchos factores que ralentizan este cambio. Uno de los motivos es la insuficiente infraestructura para los coches eléctricos. Por lo tanto, quiero hacer un visor para facilitar a localizar mejor los puntos de recarga dentro de Barcelona. 1.2 Objetivo El objetivo principal de este proyecto es crear un visor de puntos de cargas para los coches eléctricos dentro del área metropolitana de Barcelona. Para ello utilizaremos el programa Postgres que contiene los datos de los puntos de carga para la clasificación y ordenación de los datos, el Geoserver con el servicio de WFS conectar los datos y llevarlo a Leaflet que es una biblioteca de JavaScript utilizada para crear mapas interactivos en aplicaciones web. Mapa interactivo de puntos de carga para coches eléctricos en Barcelona 4 2 Planes de control de polución por movilidad Barcelona ha implementado diversas medidas para reducir la contaminación derivada del tráfico. Este capítulo se centra en dos de las principales estrategias: las Zonas de Bajas Emisiones (ZBE), que restringen el acceso a vehículos contaminantes en ciertas áreas, y el Plan MOVES III, que fomenta la movilidad sostenible mediante incentivos para vehículos eléctricos y mejoras en la infraestructura de recarga. 2.1 Zonas de bajas emisiones en Barcelona La Zona de Bajas Emisiones (ZBE) de Barcelona es un área de más de 95 km² en la que se restringe la circulación de los vehículos más contaminantes con el objetivo de proteger la atmósfera, la salud de las personas y el medio ambiente. Esta zona abarca toda la ciudad de Barcelona entre la Ronda de Dalt y la Ronda del Litoral, así como partes o la totalidad de los municipios de L’Hospitalet de Llobregat, Cornellà de Llobregat, Esplugues de Llobregat y Sant Adrià de Besòs. Sin embargo, en la ciudad de Barcelona, quedan fuera de la ZBE los barrios de Vallvidrera, el Tibidabo, les Planes y la Zona Franca (Fig.1). El propósito principal de la ZBE Rondas de Barcelona es reducir la contaminación ambiental, mejorar la calidad del aire y proteger la salud pública. Esta iniciativa forma parte de las acciones del Ayuntamiento para reducir en 15 años un 30 % las emisiones de contaminantes en la atmósfera, especialmente de dióxido de nitrógeno [1]. Actualmente, solo los vehículos que disponen de las etiquetas 0, eco, C y B de la DGT pueden circular por la ZBE. La etiqueta 0 está reservada para los vehículos completamente eléctricos o híbridos enchufable, mientras que la etiqueta eco corresponde a los vehículos híbridos. Las etiquetas C y B son para vehículos sin electrificación, como los de gasolina y diésel, pero que cumplen con los estándares de emisiones menos contaminantes según su antigüedad. Este tipo de restricciones y políticas medioambientales favorecen la adopción de vehículos más sostenibles, como los coches eléctricos e híbridos, ya que los consumidores tienden a optar por modelos que les permitan circular libremente dentro de la ZBE, lo que, a su vez, contribuye a una mayor demanda de estos tipos de vehículos en el futuro. Fig.1: Zona de Bajas Emisiones (ZBE) Rondas de Barcelona [1] 2.2 Plan Move III El precio de los coches eléctricos es superior que el de los coches de combustión. Esto junto a la falta de infraestructuras adecuadas para su recarga son factores que dificultan que los posibles compradores opten por ellos. En España, existe un plan de ayuda llamado Plan Move III, cuyos principales objetivos son: i), fomentar la adquisición de vehículos eléctricos con enchufe o pila de hidrógeno, y ii), apoyar el desarrollo de la infraestructura de recarga. Con este plan, el Estado subvenciona a los consumidores ofreciendo ayudas de hasta 7.000 euros por la compra de un vehículo eléctrico si se da de baja un vehículo antiguo, o de hasta 4.500 euros sin necesidad de dar de baja un vehículo. Además, se brinda apoyo para la instalación de puntos de recarga eléctricos, con subvenciones de hasta un 70% para particulares y un 55% para empresas (Fig. 2). Fig. 2: Plan Move III [2] Mapa interactivo de puntos de carga para coches eléctricos en Barcelona 6 3 Estudios de puntos de cargas En este apartado se realizarán estudios sobre los puntos de carga eléctrica en tres niveles: el mercado europeo, el mercado español y, finalmente, la ciudad de Barcelona. Este análisis permitirá entender la evolución, la distribución y las características de la infraestructura de carga en diferentes contextos, proporcionando una visión global que servirá de base para evaluar la situación local en Barcelona. Además, se identificarán tendencias, desafíos y posibles oportunidades para mejorar la accesibilidad y eficiencia de los puntos de carga eléctrica en cada uno de estos ámbitos. 3.1 Estudio de puntos de carga en Europa Según el informe "EU EV Charging Infrastructure" de la EAFO, hasta finales de 2023, los países miembros de la Unión Europea cuentan con un total de 632,423 puntos de carga para vehículos eléctricos, los cuales brindan servicio a una flota de 3 millones de vehículos eléctricos. Esta infraestructura refleja el compromiso de la región con la transición hacia una movilidad más sostenible y el cumplimiento de sus objetivos climáticos. Los países del Europa del este tienden a tener más potencia de carga en cada punto de carga. Países como Bulgaria, Estonia y Letonia tienen una alta potencia de carga, lo que indica que su infraestructura es muy buena en comparación con el número de estaciones de carga. Esta tendencia sugiere que la asignación de recursos es más eficiente en áreas con menos puntos de carga, pero más potentes. Países como Eslovaquia, Croacia y la República Checa también demuestran una importante potencia de carga unitaria, formando un grupo de países que invierten en infraestructura de carga de alta capacidad. La cobertura de red es amplia, pero la potencia modesta de los países de Europa occidental como los Países Bajos, Alemania y Francia adoptan un enfoque equilibrado y cuentan con amplias redes de puntos de carga. Si bien cada punto de carga tiene una potencia de carga modesta, su extensa red admite una gran cantidad de vehículos eléctricos, lo que garantiza la accesibilidad y comodidad del usuario (Fig.3). En el sur de Europa, países como España, Italia y Grecia están mostrando una tendencia emergente en la infraestructura de vehículos eléctricos. Aunque la potencia de carga por punto de carga en estos países es menor que en Europa del Este, el número de puntos de carga sigue creciendo, lo que indica que estos países continúan invirtiendo y expandiéndose. Fig.3 Mapa de puntos electrónicos por países de la unión europea [3] En la Región nórdica, Noruega y Finlandia, son conocidas por su alta penetración de vehículos eléctricos, están ampliando constantemente su infraestructura. A pesar de la menor potencia de carga por vehículo, el crecimiento general de las estaciones de carga muestra que están luchando por satisfacer la creciente demanda. Los países menos desarrollados como Irlanda, Malta y Chipre son países con gran potencial pero que actualmente cuentan con infraestructuras subdesarrolladas. La potencia de carga por vehículo es menor en estas regiones, lo que indica una necesidad urgente de acelerar la inversión y el desarrollo para respaldar la futura adopción de vehículos eléctricos. Fig.4 Números de puntos de cargas por países de la unión europea [4] Mapa interactivo de puntos de carga para coches eléctricos en Barcelona 14 Fig.11 Espacio de trabajo de Geoserver Para vincular el visor con GeoServer, se utiliza una URL que permite establecer la conexión y definir el espacio de trabajo. En primer lugar, se especifica la dirección del GeoServer y el espacio de trabajo correspondiente. A continuación, se indica el servicio y la acción que se desea realizar, en este caso, el servicio WFS (Web Feature Service) y la operación GetFeature, que permite acceder a los datos espaciales. Seguidamente, se proporciona el nombre del dato dentro del espacio de trabajo mediante el parámetro typeName. También se define el formato en el que se desean recibir los datos, que en este caso es JSON, a través del parámetro outputFormat=application/json. Por último, se puede incluir un filtro CQL (Common Query Language) mediante el parámetro CQL_FILTER. Este filtro permite filtrar los datos según los criterios que le especifiquen, adaptando la consulta a las necesidades del proyecto (Fig.12). Fig.12 URL de vinculo. . 5 Descripción del visor Para desarrollar este visor web, fue necesario elegir una biblioteca JavaScript adecuada. Entre las más utilizadas destacan OpenLayers y Leaflet. Al final se ha optado por utilizar Leaflet ya que es la librería que más me he familiarizado Además de la biblioteca JavaScript, se emplearon los siguientes lenguajes de programación para llevar a cabo el desarrollo: - HTML (HyperText Markup Language): Es el lenguaje utilizado para estructurar las páginas web mediante etiquetas, facilitando su interpretación tanto por parte de los desarrolladores como de las plataformas web. - CSS (Cascading Style Sheets): Permite definir el diseño y la presentación de las páginas estructuradas en HTML. Este lenguaje ayuda a separar el contenido del diseño visual, gestionando aspectos como la disposición, los colores y los fondos. - JavaScript: Es un lenguaje de programación versátil y orientado a objetos, que se utiliza principalmente para añadir interactividad y dinamismo a las páginas web. 5.1 Descripción de Leaflet Leaflet [12] es una biblioteca de JavaScript de código abierto utilizada para la creación y publicación de mapas web. Fue desarrollada por Vladimir Agafonkin a principios de 2011 y, en 2012, fue adoptada por OpenStreetMap. La principal característica de Leaflet es su simplicidad, que se combina de manera efectiva con el uso de plugins. Esta API permite ampliar sus funcionalidades mediante la incorporación de plugins, lo que mantiene su núcleo ligero y sencillo sin renunciar a nuevas características y mejoras. Mapa interactivo de puntos de carga para coches eléctricos en Barcelona 16 En este proyecto, hemos utilizado varios plugins para incorporar las funcionalidades necesarias al visor. Todos estos plugins están disponibles en GitHub, una plataforma en línea creada para almacenar y gestionar el código de aplicaciones y herramientas de desarrolladores de todo el mundo. Además de poder descargar aplicaciones, los usuarios pueden colaborar con los desarrolladores a través de la plataforma. Cada plugin de Leaflet ha sido creado por un desarrollador diferente y se encuentra alojado en su propio repositorio dentro de GitHub. El plugin y las librerías utilizados son: - Leaflet: Carga la librería Leaflet versión 1.9.4 desde un CDN. Leaflet es una biblioteca de JavaScript utilizada para crear mapas interactivos en páginas web. - Leaflet.MiniMap: sirve para añadir un mapa pequeño en un rincón del mapa principal, en el que se visualiza el mismo mapa, pero a un nivel de zoom inferior. - jquery: El código hace una llamada AJAX con jQuery a un servicio WFS para obtener datos geoespaciales en formato JSON y mostrarlos en la página web. 5.2 Descripción del visor A continuación, se describe el visor, sus características y funcionamiento con la ayuda de algunas imágenes del visor web. En primer lugar, podemos ver la figura 13 con la apariencia inicial del visor. Fig.13: Imagen inicial del visor 1. Cuadro de búsqueda por latitud y longitud: Permite al usuario ingresar coordenadas (latitud y longitud) en WGS84 para establecer el centro del radio en el mapa. 2. Cuadro de radio: Un campo donde el usuario puede ingresar un valor para definir un radio en metros para definir la zona de búsqueda y visualización con centro en las coordenadas introducidas 3. Selector por tipo de conector: Para mostrar el tipo de conector que quiere el usuario 4. Botón de filtrar puntos y reset: Un botón que permite filtrar los puntos que estén dentro del radio establecido y un botón de "reset" para restaurar el mapa a su estado original. 5. Mini mapa: Una vista en miniatura del mapa principal, utilizada para proporcionar una referencia rápida de la ubicación general en el mapa. 6. Coordenadas en tiempo real de donde esté el cursor: Muestra las coordenadas (latitud y longitud) de la ubicación actual del cursor del ratón sobre el mapa en tiempo real. 7. Control del zoom: Herramienta que permite al usuario acercar o alejar el mapa, normalmente con botones o utilizando la rueda del ratón. 8. Escala gráfica: Un elemento visual en el mapa que indica la distancia real en el terreno, permitiendo al usuario medir distancias de manera visual. El visor permite al usuario establecer un punto en el mapa, introduciendo las coordenadas o haciendo un clic en el mapa y se introducirá la coordenada de ese punto. La coordenada introducida se convierte en el centro de una circunferencia que podrá definir el radio, junto con el tipo de conector que desee utilizar. De este modo, el visor mostrará todos los puntos que se encuentren dentro de esta circunferencia, facilitando al usuario la visualización de las opciones disponibles en esa área. Además, el usuario tiene la opción de seleccionar un tipo de conector sin necesidad de especificar coordenadas ni radio, lo que permitirá que el visor muestre todos los puntos correspondientes a ese tipo de conector en el mapa (Fig.14). Mapa interactivo de puntos de carga para coches eléctricos en Barcelona 18 Fig.14: Ejemplo de búsqueda 5.3 Descripción del código del visor La siguiente imagen (Fig.15) nos muestra cómo el código proporcionado realiza varias funciones esenciales para la creación del visor. La primera línea establece la codificación de caracteres como UTF-8, lo que permite manejar caracteres especiales correctamente. A continuación, se configura la ventana gráfica para que la página sea responsiva y se cargue con un nivel de zoom inicial de 1. El título de la página se define, y este aparecerá en la pestaña del navegador. Se incluyen archivos CSS que aplican estilos necesarios para la visualización de mapas interactivos usando la librería Leaflet, así como un archivo adicional para un plugin MiniMap que añade un mini mapa a la interfaz. Posteriormente, se cargan los archivos JavaScript de Leaflet y el plugin Leaflet MiniMap, que permiten agregar la funcionalidad de mapas interactivos y mini mapas. También se carga la librería jQuery, que facilita la manipulación de elementos HTML, el manejo de eventos y la realización de peticiones AJAX, mejorando así la interactividad y dinamismo de la página. Fig.15: La cabecera del código En la figura 16 nos proporciona el estilo del cuerpo de la página (body) establece la fuente como Arial y elimina márgenes y rellenos predeterminados para un diseño más limpio. El contenedor del título (#title-container) centra el texto, establece un fondo de color verde (#4CAF50), y define un tamaño de fuente de 24px con negrita. En cuanto a los controles (#controls), se les da un relleno de 10px, un fondo de color gris claro (#f9f9f9), y un borde inferior de 1px en color gris oscuro (#ddd). Los controles se organizan en un diseño flexible (con display: flex), de modo que los elementos dentro de este contenedor se alinean al centro, con un espacio de 10px entre ellos y un ajuste de línea si es necesario gracias a la propiedad flex-wrap. Para los elementos dentro de los controles, como las etiquetas, campos de entrada, selectores y botones (#controls label, #controls input, #controls select, #controls button), se les asigna un relleno de 5px, un tamaño de fuente de 14px, y un margen a la derecha de 10px para separar los elementos. El estilo del mapa (#map) asegura que este ocupe el 100% del ancho de su contenedor y tenga una altura de 600px. El estilo de las coordenadas del cursor (#cursorcoordinates) define que el texto de las coordenadas esté centrado en la parte superior del contenedor, con un tamaño de fuente de 16px y en negrita. Fig.16: El estilo del visor Mapa interactivo de puntos de carga para coches eléctricos en Barcelona 20 En la siguiente imagen (Fig.17) podemos ver cómo establecemos el título y los botones de la barra de búsqueda. En primer lugar, se muestra un título en el contenedor de título (#titlecontainer), que informa sobre los puntos de carga para vehículos eléctricos en Barcelona. Luego, se crea un conjunto de campos de entrada dentro del contenedor de controles (#controls). Estos campos permiten al usuario ingresar la latitud y longitud mediante los campos de texto correspondientes (lat y lng), con un texto de ejemplo en los placeholders indicando cómo introducir los valores. También se incluye un campo para el rango de distancia (en metros), con su correspondiente etiqueta y campo de texto (range). Además, el código incluye un menú desplegable (<select>) para que el usuario elija el tipo de conector. Las opciones disponibles son Mennekes, CHADEMO, CCS_TYPE_2, y WALL_OUTLET, cada una representando diferentes tipos de conectores para cargadores de vehículos eléctricos. Finalmente estableciendo dos botones: uno para filtrar los puntos según los criterios establecidos por el usuario (id="filter") y otro para restablecer los valores a su estado original (id="reset"). Este conjunto de elementos HTML permite la entrada de datos por parte del usuario y ofrece botones para filtrar o restablecer la vista de los puntos de carga en el mapa. Fig.17: El título y los botones En esta sección (Fig.18) vemos que el mapa se ajusta al 100% de ancho y tiene una altura de 600 píxeles. El segundo contenedor muestra las coordenadas del cursor (latitud y longitud) en tiempo real, actualizándose mientras el usuario mueve el ratón sobre el mapa. Las coordenadas están inicialmente en "0.0000" y se actualizan a medida que se interactúa con el mapa. Fig.18: Las coordenadas del cursor a tiempo real En la siguiente imagen (Fig.19) el código inicializa el visor centrado en Barcelona con Leaflet, utilizando coordenadas específicas y un nivel de zoom de 13. Se agrega una capa base de OpenStreetMap que proporciona el fondo del mapa con detalles geográficos, y se añade un MiniMapa que ofrece una vista reducida del área principal, permitiendo a los usuarios tener una referencia visual de su ubicación dentro de un espacio más amplio. Además, se incluye una barra de escala en la esquina inferior izquierda para medir distancias en unidades métricas. Fig.19: Inicio del cuerpo del código A continuación, es la sección que carga y visualiza todos los puntos de carga disponibles en el mapa, obteniéndose de un servidor WFS en formato GeoJSON. También añade información adicional a cada punto a través de popups que se muestran al hacer clic en los marcadores. Con esta sección hace que nada más iniciar el visor vemos los puntos y podemos ver la información de cada punto (Fig.20). Mapa interactivo de puntos de carga para coches eléctricos en Barcelona 22 Fig.20: llamada de wfs y representado en popups. En la imagen (Fig.21) se muestra una sección de la función de búsqueda de puntos de carga, donde se solicita al usuario introducir la latitud, longitud, rango y tipo de conector. La coordenada proporcionada por el usuario se utiliza como el centro de una circunferencia, y el rango ingresado define el radio de esta circunferencia. Al seleccionar un tipo de conector, el visor solo mostrará los puntos de carga que se encuentren dentro de ese radio, facilitando la búsqueda de los puntos más cercanos que cumplen con los criterios establecidos. Fig.21: Una sección del código de filtrar puntos. Finalmente tenemos la función del botón de reset que borra el resultado de la anterior búsqueda y volverá a aparecer todos los puntos. Después tenemos la función de mostrar las coordenadas del cursor (Fig.22). Fig.22: botón de reset y coordenadas del cursor Mapa interactivo de puntos de carga para coches eléctricos en Barcelona 30 Mapa interactivo de puntos de carga para coches eléctricos en Barcelona 32 Mapa interactivo de puntos de carga para coches eléctricos en Barcelona 34