Ejemplos de operaciones espaciales en la web con Turf y Leaflet

En este mismo blog ya hemos hablado en alguna ocasión de Turf. La librería JavaScript que nos permite realizar operaciones espaciales en la web. En aquella ocasión vimos qué es Turf, cómo se utiliza, cómo se crea un punto y un bufer…

En esta ocasión veremos algunos ejemplos muy sencillos de análisis espacial utilizando Turf y Leaflet. Como Turf utiliza geoJSON, utilizaremos este formato de datos para crear algunos elementos geográficos en Leaflet y desarrollar algunos ejemplos sobre ellos.

Integrando Turf en Leaflet

Lo primero que hay que dejar claro es que Turf no es un plugin de Leaflet. Turf es una librería JavaScript desarrollada por Mapbox que nos proporciona recursos para realizar operaciones GIS en la web. Hay varios caminos para integrar Turf en nuestros proyectos. El más sencillo y el que utilizaremos aquí es insertar un enlace CDN en el script de nuestro código.

Creamos un mapa con Leaflet en donde utilizamos geoJSON para insertar dos puntos y un polígono, que nos servirán para realizar operaciones espaciales sobre ellos.

En el código anterior tenemos un archivo geoJSON con dos puntos y un polígono. Hacemos una instancia a L.geoJSON, y con las opciones pointToLayer y onEanchFeature creamos las condiciones para dibujar los elementos geográficos en el mapa. Hay que destacar que hemos añadido una matriz vacía llamada coords a la  que con la opción onEachFeature hemos incorporado las coordenadas de los puntos y del polígono. Este aspecto del código es importante pues nos permitirá crear las coordenadas para trabajar con Turf.

Operaciones espaciales con Turf

Veamos algunos ejemplos de operaciones espaciales que podemos realizar con Turf.

Cálculo de la distancia entre dos puntos

Para calcular la distancia entre dos puntos necesitamos crear dos puntos en Turf. En el ejemplo los llamamos pt1 y pt2, y se crean mediante turf.point y las coordenadas geográficas del punto. En nuestro caso las tenemos almacenadas en la matriz coords. Turf nos permite elegir la unidad de medida de la distancia, en este caso utilizamos metros. Para que el resultado sea más fácilmente legible empleamos Math.round para aproximar el número a un valor entero. Por último escribimos ese valor en pantalla. Siendo el resultado el siguiente:

Punto medio entre dos puntos

Podemos utilizar Turf para dibujar un punto intermedio entre dos puntos. Se haría de la siguiente forma:

Este es el resultado obtenido:

Dibujando una línea y su paralela

A continuación vamos a dibujar una línea que una los dos puntos de nuestro mapa. Posteriormente trazaremos una paralela a esa línea, a una distancia definida.

Puedes ver el conjunto de las operaciones realizadas hasta el momento en el siguiente mapa:

Operaciones con polígonos

Veamos algunos ejemplos de operaciones con polígonos que nos permite realizar Turf.

Girando un polígono

Lo primero es crear un polígono con Turf. Eso lo hacemos con turf.polygon y las coordenadas del polígono que tenemos almacenadas en coords.

El giro se realiza con .transformRotate. Tenemos que indicar el polígono que queremos girar, en nuestro caso poly. El ángulo de giro, en este caso 60. En opciones definimos el punto sobre el cual queremos que se realice el giro. Por último añadimos el nuevo polígono al mapa y le damos un color.

Intersección entre dos polígonos

Ahora vamos a calcular el área de intersección entre el polígono girado y el original.

Unión de polígonos

Para unir varios polígonos se emplea turf.union y a continuación se indican los polígonos a unir.

Extraer los vértices de un polígono

Con esta operación de lo que se trata es de dibujar un marcador en cada vértice de un polígono.

En el mapa siguiente se muestra las operaciones realizadas hasta aquí:

Si quieres aprender a crear visores web profesionales como estos, inscríbete ya en nuestro curso online 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 «Ejemplos de operaciones espaciales en la web con Turf y Leaflet»

  1. Muchas gracias por tu comentario
    Como puedes ver la aplicación de Turf en Leaflet es bastante sencilla y no plantea ninguna dificultad especial. Si conoces OpenLayers no te será difícil utilizar Leaflet, ya que es bastante parecido y muy fácil de aprender. Leaflet dispone además de muchos plugins que ayudan al desarrollo.

  2. Hola, muy interesante el trabajo que muestran.
    Tengo un sistema en desarrollo que permitirá al usuario ver ciertos polígonos y podrá editarlos, pero estoy trabajando con OpenLayers, el problema que me surge es al momento de guardar los cambios, no me lo hace, y me salen errores de js que no existían, por lo que estoy buscando otra alternativa.
    Veo que con turf puede dar esa posibilidad de editar, pero quisiera saber con qué operación sería y/o que recomendacion me daría para trabajar, no eh trabajado con leaflet, y no se que tan comlicaado sería combinarlo con turf.
    Busco trabajar con software libre.
    Muchas gracias.

Los comentarios están cerrados.