Cómo calcular distancias con Leaflet y otros métodos de conversión

Leaflet es una librería JavaScript que se utiliza para publicar mapas en la web. Es una librería ligera que se compone de un cuerpo reducido de métodos , que se completa con un extenso catálogo de complementos o plugins.

Un grupo de métodos no muy utilizado es el que se denomina métodos de conversión y que, desde la versión 1.0, dispone de un método para calcular distancias con Leaflet. En este artículo vamos a trabajar con algunos de estos métodos y a escribir un ejemplo para el cálculo de distancias con Leaflet.

distancias con Leaflet

Métodos de Leaflet

La clase central de la librería de Leaflet es la clase map. Esta clase dispone de varios métodos que se pueden agrupar de la siguiente forma:

  • Existen métodos para modificar el estado del mapa.
  • Métodos con los que podemos realizar consultas sobre el mapa.
  • Métodos para manejar capas y controles.
  • Métodos de conversión.
  • Otros métodos.

La lista completa de métodos se puede consultar en la documentación de Leaflet.

En esta ocasión nos fijamos en los métodos de conversión. Forman un grupo heterogéneo sobre los que se puede decir que son los métodos encargados de trabajar o convertir los sistemas de coordenadas que maneja la librería. Aunque pude resultar confuso no nos referimos aquí a los sistemas de referencias geográficos, nos estamos refiriendo al propio sistema de coordenadas que utiliza Leaflet para situar un punto. Para entender mejor esto es  conveniente consultar la explicación que se da sobre el origen del pixel en la documentación de Leaflet.

El origen del pixel

Para simplificar este tema que pude resultar confuso podemos decir que Leaflet tiene dos formas de ubicar un punto sobre el mapa:

  1. Por sus coordenadas geográficas: latitud y longitud.
  2. Por las coordenadas del contenedor del mapa: x e y.

Leaflet crea en la página web un espacio o contenedor que será el elemento que albergue el mapa. Cada punto del mapa tendrá sus coordenadas geográficas, pero Leaflet las convierte en un sistema de coordenadas con origen en la esquina superior izquierda del mapa. A partir de ese origen, cualquier pixel tendrá su correspondiente coordenada x,y. Estas coordenadas se fijan una vez, cuando creamos el mapa y se mantienen constantes aunque hagamos zoom o pan sobre el mapa.

Pero, para complicar más la situación, Leaflet dispone de otras coordenadas para el pixel que se corresponden con lo que podemos llamar la vista del mapa. Nos explicamos: al hacer desplazar el mapa (arrastrando con el mouse) estamos modificando lo que podemos llamar la «vista del mapa». Leaflet establece entonces una tercera coordenada que sería la de la posición de ese punto del contenedor con relación al origen de coordenadas del pixel. Para que se entienda mejor vamos a escribir un ejemplo, utilizando los métodos de conversión.

Métodos de conversión

Vamos a ver a continuación algunos de los métodos de conversión:

  • layerPointToLatLng: Dada una coordenada de píxel relativa al píxel de origen, devuelve la coordenada geográfica correspondiente (para el nivel de zoom actual).
  • latLngToLayerPoint: Dada una coordenada geográfica, devuelve la correspondiente coordenada de píxeles en relación con el píxel de origen.
  • containerPointToLayerPoint: Dada una coordenada de píxel relativa al contenedor del mapa, devuelve la correspondiente coordenada de píxel relativa al píxel de origen.

Podemos verlos en el siguiente ejemplo:

El resultado se puede ver en el siguiente mapa:

En este visor webmapping al hacer clic sobre cualquier punto del mapa se abre un popup en que se muestran las coordenadas geográficas del punto y las coordenadas del pixel.

También podemos ver el resultado de las operaciones con los tres métodos expuestos. Aunque hagamos zoom en el mapa vemos que las coordenadas x e y son las mismas para los métodos latLngToLayerPoint y containerPointToLayerPoint. Sin embargo no sucede de la misma forma al desplazar el mapa. En ese caso las coordenadas obtenidas por estos métodos no son las mismas. Esto se debe a que latLngToLayerPoint nos da las coordenas del pixel con relación al origen, mientras que containerPointToLayerPoint nos proporciona las coordenadas relativas del contenedor del mapa.

Más métodos de conversión

Otros métodos para convertir unas coordenadas de uno de los tipos indicados a otro son las siguientes:

  • layerPointToContainerPoint: Dada una coordenada de píxel relativa al píxel de origen, devuelve la correspondiente coordenada de píxel relativa al contenedor del mapa.
  • containerPointToLatLng:Dada una coordenada de píxel relativa al contenedor del mapa, devuelve la coordenada geográfica correspondiente.
  • latLngToContainerPoint: Dada una coordenada geográfica, devuelve la correspondiente coordenada de píxeles en relación con el contenedor del mapa.
  • mouseEventToContainerPoint: Dado un objeto MouseEvent, devuelve la coordenada de píxeles relativa al contenedor del mapa donde tuvo lugar el evento.
  • mouseEventToLayerPoint: Dado un objeto MouseEvent, devuelve la coordenada de píxel relativa al píxel de origen donde tuvo lugar el evento.
  • mouseEventToLatLng: Dado un objeto MouseEvent, devuelve la coordenada geográfica donde tuvo lugar el evento.

Metodo distance (distancias con Leaflet)

El método distance calcula la distancia entre dos puntos del mapa y nos da su valor en metros. Es un método muy fácil de aplicar pues solo necesita que se proporcionen las coordenadas geográficas de dos puntos.

Además de calcular las distancias con Leaflet, introducimos alguna característica adicional en nuestro código, de tal forma que los puntos puedan ser seleccionados sobre el mapa.

En el código anterior, además de escribir el código para capturar las coordenadas de los dos puntos, hemos indicado que nos dibuje una línea entre ambos.

La función «medirDistancia» es la que se contiene el método distance:

El resultado se puede ver en el siguiente mapa:

Haz clic sobre dos puntos del mapa y se indicará la distancia entre ambos expresada en metros.

El código completo de este ejemplo es:

Si quieres aprender a crear visores web con Leaflet, inscríbete ya a nuestro curso online de visores webmapping con Leaflet.

Let’s connect!

Date de alta en nuestra newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos

2 comentarios en “Cómo calcular distancias con Leaflet y otros métodos de conversión”

Deja un comentario