En el mundo del desarrollo web cartográfico, la superposición de múltiples capas GeoJSON con proyecciones diferentes es una tarea común pero crucial. OpenLayers, una potente biblioteca JavaScript de código abierto para mapas interactivos, ofrece herramientas para manejar esta complejidad de manera efectiva.
Sistemas de Referencia en OpenLayers
OpenLayers trabaja con varios sistemas de referencia comunes, entre los que se incluyen:
- EPSG:4326 (WGS 84): Sistema de coordenadas geográficas utilizado ampliamente, expresado en grados decimales de latitud y longitud.
- EPSG:3857 (Sistema de Coordenadas Mercator Web): Un sistema de coordenadas proyectadas que se utiliza comúnmente para visualizaciones web, expresado en metros.
- Otros sistemas de referencia, como EPSG:25830 (UTM Zone 30N), que también pueden ser compatibles con OpenLayers.
Al cargar capas GeoJSON con diferentes proyecciones, es fundamental transformar las coordenadas para que se ajusten a la proyección del mapa base. Esto garantiza una superposición precisa de los datos y una visualización correcta.
En este artículo, exploraremos cómo cargar y superponer capas GeoJSON con distintas proyecciones utilizando OpenLayers. Además, proporcionaremos un ejemplo práctico para comprender mejor el proceso.
En nuestro ejemplo, cargaremos dos capas GeoJSON con proyecciones diferentes y las superpondremos en un mapa base. La primera capa estará en la proyección EPSG:4326* (WGS 84), mientras que la segunda estará en EPSG:25830 (UTM 30N).
*Aunque no sería necesaria la transformación de la capa en la proyección EPSG:4326 ya que OpenLayers la acepta de forma predeterminada, nos servirá como ejemplo.
Añadiendo la librería Openlayers y Proj4js
El primer paso consiste en incluir tanto la biblioteca OpenLayers como Proj4 para asegurarnos de tener acceso a todas las funcionalidades necesarias. Esto nos permitirá cargar, manipular y visualizar capas GeoJSON con diversas proyecciones de manera efectiva en OpenLayers.
<!DOCTYPE html>
<html>
<head>
<title>Cargar y superponer múltiples capas GeoJSON con diferentes proyecciones</title>
<!-- Incluimos el CSS de OpenLayers para estilizar el mapa -->
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<!-- Incluimos nuestro archivo de estilos personalizado -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Contenedor donde se renderizará el mapa -->
<div id="map"></div>
<!-- Incluimos la librería de OpenLayers para poder utilizar sus funciones -->
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<!-- Incluimos la librería Proj4js para manejar las proyecciones espaciales -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.2/proj4.js"></script>
<!-- Incluimos nuestro archivo JavaScript principal donde se encuentra la lógica del mapa -->
<script src="main.js"></script>
</body>
</html>Además, integraremos tanto nuestros estilos personalizados como el CSS de OpenLayers, junto con nuestro archivo principal JS que contiene la lógica del mapa.
Establecer el tamaño del mapa
Definiremos el tamaño del mapa desde el archivo CSS. El fragmento de código CSS proporcionado asegura que el elemento con el ID ‘map’ ocupe todo el ancho disponible y el 98% de la altura visible del viewport
#map {
width: 100%;
height: 98vh;
}
Registrar las proyecciones
OpenLayers no trabaja por defecto con la proyección EPSG:25830 (UTM Zona 30). Por lo que, utilizaremos la biblioteca proj4js para registrar esta proyección y asegurar que pueda entender y trabajar con coordenadas en este sistema de referencia.
// Esta proyección es una proyección UTM Zona 30 basada en el sistema de referencia GRS80.
proj4.defs("EPSG:25830", "+proj=utm +zone=30 +ellps=GRS80 +units=m +no_defs");
ol.proj.proj4.register(proj4);Función para transformar coordenadas
Ahora, implementaremos la función transformCoordinates para transformar las coordenadas, en este caso, de la proyección EPSG:25830 a EPSG:3857, que es la proyección utilizada por OpenLayers por defecto para los mapas web.
function transformCoordinates(coordinateSystem, coordinates) {
return proj4(coordinateSystem, 'EPSG:3857', coordinates);
}Función para cargar y transformar GeoJSON
Esta función loadAndTransformGeoJson cargará un archivo GeoJSON desde una URL dada y transforma sus coordenadas a la proyección EPSG:3857. También permite especificar un color para los puntos que serán dibujados en el mapa.
function loadAndTransformGeoJson(url, coordinateSystem, color) {
fetch(url)
.then(response => response.json())
.then(data => {
// Creamos una nueva fuente vectorial vacía donde almacenaremos las características transformadas.
const transformedVectorSource = new ol.source.Vector();
// Recorremos cada característica del GeoJSON.
data.features.forEach(feature => {
// Transformamos las coordenadas de la característica a la proyección que se recibe como parámetro
const transformedCoordinates = transformCoordinates(coordinateSystem, feature.geometry.coordinates);
// Creamos una nueva característica con las coordenadas transformadas.
const transformedFeature = new ol.Feature({
geometry: new ol.geom.Point(transformedCoordinates)
});
// Agregamos la característica transformada a la fuente vectorial.
transformedVectorSource.addFeature(transformedFeature);
});
// Creamos una capa vectorial con la fuente vectorial transformada y un estilo personalizado.
const transformedVectorLayer = new ol.layer.Vector({
source: transformedVectorSource,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({
color: color
}),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
})
})
})
});
// Agregamos la capa vectorial transformada al mapa.
map.addLayer(transformedVectorLayer);
})
.catch(error => {
console.error('Error al cargar y transformar el GeoJSON:', error);
});
}Crear una capa de teselas
Esta parte del código crea una capa de teselas para servir como fondo del mapa, utilizando el servicio de teselas OSM (OpenStreetMap).
// Servicio de teselas OSM.
const OSM = new ol.layer.Tile({
source: new ol.source.OSM()
});Crear el mapa base y la vista
Aquí inicializamos el mapa con la capa de teselas. Además, se crea una vista centrada en las coordenadas de Madrid.
// Creamos una vista centrada en las coordenadas de Madrid para el mapa.
const view = new ol.View({
center: ol.proj.fromLonLat([-3.705983, 40.41903]),
zoom: 15
});
// Inicializamos el mapa con la capa de teselas y la capa vectorial en EPSG:4326.
const map = new ol.Map({
target: 'map',
layers: [OSM],
view: view
});Cargar, transformar GeoJSON a EPSG:3857 y añadir al mapa
Finalmente, se cargan los dos archivos GeoJSON, se transforman a la proyección EPSG:3857 (comúnmente utilizada por OpenLayers), y se añaden al mapa con estilos de color proporcionados como argumentos (rojo y azul).
loadAndTransformGeoJson('./data/map25830.geojson', 'EPSG:25830', 'red');
loadAndTransformGeoJson('./data/map4326.geojson', 'EPSG:4326', 'blue');En la imagen se puede apreciar la disposición final de las capas, mostrando cómo se superponen y complementan los datos geoespaciales representados en el mapa.
Puedes examinar el código completo del script y realizar pruebas interactivas para explorar las funciones del mapa de manera dinámica desde el siguiente enlace:
¿Quieres comentarnos algo? Adelante!