Al trabajar con mapas y espacios geográficos en el desarrollo de software, es muy normal cruzarse con referencias de coordenadas EPSG diferentes. Entre las más utilizadas están epsg:3857 y epsg:4326.
En muchos casos, es necesario transformar de una a la otra para que el proyecto a desarrollar sea coherente con el resto del proyecto o compatible con la plataforma sobre la que estamos desarrollando.
En el caso de los proyectos web, hay muchas bibliotecas que pueden ayudarnos a realizar estas transformaciones. Pero esto puede derivar en que importemos también archivos y dependencias que en realidad no necesitamos, por lo que el proyecto comienza a aumentar su tamaño innecesariamente.
Generalmente, esto es algo que queremos evitar y buscamos realizar estas transformaciones internamente en nuestro código como una función o módulo más.
Entonces, ¿Cómo podemos hacerlo? En este artículo te comparto cómo.
¿Cómo diferenciamos EPSG:4326 de EPSG:3857?
En primer lugar, es necesario saber qué tenemos y qué deseamos obtener. Para eso es necesario diferenciar entre estos dos sistemas de referencia espacial. Una vez seguros de que nuestras coordenadas pertenecen a uno de estos dos sistemas de referencia de coordenadas, reconocer cual es cual es una tarea sencilla.
Cabe destacar que si bien en Auravant utilizamos el sistema EPSG:4326 en la mayoría de los casos, puede ocurrir que una API o función del SDK antigua devuelva coordenadas en EPSG:3857.
Las coordenadas EPSG:4326 son representadas en números entre -180 y 180. En cambio, las coordenadas EPSG:3857 son números que exceden este rango por valores inmensos.
Ejemplo de coordenadas en EPSG:4326
[2.294364273602696, 48.85882287559042]
Ejemplo de coordenadas en EPSG:3857
[255407.46259617808, 6250940.450853652]
En este caso, utilizaremos el lenguaje de JavaScript para implementar las transformaciones y que puedan ser aplicadas directamente en el código de tus extensiones.
EPSG:4326 a EPSG:3857
La siguiente función convierte coordenadas de EPSG:4326 a EPSG:3857 en JavaScript.
function epsg4326ToEpsg3857(coordinates) {
let x = coordinates[0];
let y = coordinates[1];
x = (x * 20037508.34) / 180;
y = Math.log(Math.tan(((90 + y) * Math.PI) / 360)) / (Math.PI / 180);
y = (y * 20037508.34) / 180;
return [x, y];
}
Siendo coordinates las coordenadas que la función va a recibir como argumento, en formato Array(2) donde el primer elemento va a ser la longitud y el segundo la latitud.
La longitud la vamos a transformar con una multiplicación y división.
Para la latitud, debemos hacer una transformación previa a la multiplicación y división. Para entenderlo:
- El objeto Math es una biblioteca que viene integrada en Javascript y, en este caso, no deberemos hacer importaciones extra.
- Math.log() devuelve el logaritmo natural de lo que recibe.
- Math.tan() devuelve la tangente.
- Math.PI hace referencia al número PI (3.14159…)
EPSG:3857 a EPSG:4326
Para calcular las transformaciones de EPSG:3857 a EPSG:4326, podemos buscar la inversa a la función anterior. En este caso, resolvimos este problema nosotros para facilitarte la tarea.
function epsg3857ToEpsg4326(coordinates) {
let x = coordinates[0];
let y = coordinates[1];
x = (x * 180) / 20037508.34;
y = (y * 180) / 20037508.34;
y = (Math.atan(Math.pow(Math.E, y * (Math.PI / 180))) * 360) / Math.PI - 90;
return [x, y];
}
¿Y si no estamos seguros sobre qué sistema de referencia espacial recibimos?
Puede ser que en algunas ocasiones sepamos que los desarrolladores de una API puede cambiar su respuesta y que nos comience a devolver otro sistema de coordenadas. Entonces, ¿cómo podemos manejar esto?
Se podría aplicar una condición para que realice la transformación solamente en el caso de que el módulo (absoluto) de las coordenadas obtenidas poseen valores mayores a 180.
Suponiendo que queremos contar con las coordenadas en el sistema EPSG:4326 sin importar si las recibimos en estas o en EPSG:3857. Entonces:
function returnEPSG4326(coordinates) {
if (Math.abs(coordinates[0]) > 180 || Math.abs(coordinates[1]) > 180) {
coordinates = epsg3857toepsg4326(coordinates);
}
return coordinates;
}
Esto, si prestamos atención, funciona a costo de un pequeño márgen de error, en el caso en que las coordenadas se encuentren en el sistema de referencia de EPSG:3857 y que tanto la longitud como la latitud sean valores cuyo módulo es menor a 180 en ambos casos.
Es un margen de error bastante pequeño y queda a discreción del desarrollador elegir si implementarlo o no.
Conclusiones
En este artículo viste cómo realizar transformaciones entre dos de los sistemas de coordenadas más utilizados en la actualidad EPSG:3857 y EPSG:4326. Ya estás listo para implementar estas funciones en tus extensiones de Auravant. ¿No estás seguro de cómo empezar? Te invito a que veas el siguiente post del blog: Como construir una extensión de cero en Auravant con React y Vite, por Guillermo Gonzalez.