Por defecto, Cesium no es capaz de generar mapas de calor, por lo que es necesario utilizar soluciones de terceros para conseguir implementar dicha funcionalidad al visor.

Existe una librería llamada heatmap.js que calcula y representa mapas de calor a partir de diferentes tipos de entrada, como la posición del ratón en pantalla, donde se hace clic o incluso a partir de coordenadas del propio canvas del navegador.

Open

A partir de esta librería y de la idea de representar puntos en el canvas, se ha desarrollado otra librería llamada CesiumHeatmap.js que permite generar mapas de calor en el propio visor partiendo de las coordenadas de los puntos, y de un valor representativo del peso del punto.

Al terminar este tutorial, a partir de una ontología de puntos se podrá generar un mapa de calor similar a este:

El primer paso consistirá en descargar y descomprimir la librería, o clonar el repositorio (https://github.com/manuelnas/CesiumHeatmap.git) en la carpeta del proyecto donde se contenga el visor. 

Open

El archivo descargado/clonado cuenta con los siguientes archivos:

• CesiumHeatmap.js: la librería para agregar mapas de calor usando heatmap.js (la incluye) y la funciones Cesium.Entity.Rectangle o Cesium.SingleTileImageryProvider, y es la que se usará en este tutorial.

• HeatmapImageryProvider.js: otra librería para agregar mapas de calor usando también heatmap.js (también la incluye) mediante la personalización de la función Cesium.ImageryProvider, y que de momento no se verá.

• LICENSE: documento genérico con el copyright de las librerías.

• package.json: archivo con la dirección del repositorio.

• README.md: documento con la descripción de las librerías, así como el ejemplo de uso de CesiumHeatmap.js.

Para utilizar la librería en el visor de Cesium, hay que insertar la librería de CesiumHeatmap.js a continuación de la llamada de la librería de Cesium.js, tal como se muestra a continuación:

Hecho esto, ya se puede empezar a generar mapas de calor.

A la hora de generar un mapa de calor se necesitan una serie de entidades de tipo punto (no funciona con líneas o polígonos), con unas coordenadas geoespaciales definidas (normalmente longitud y latitud), así como un campo que contenga el valor o peso de cada punto respecto al resto de puntos.

Para este tutorial se han creado una serie de puntos, a cada uno de los cuales se les ha asignado un valor. Dichos puntos representados en un mapa junto a sus valores se verían de la siguiente manera:

Open

Las coordenadas y valores de todos estos puntos -30 en total- se encuentran recogidos en una ontología cargada en la Plataforma y servida como un servicio API REST. Cada entidad mantiene la siguiente estructura:

En dicha estructura, se encuentran definidos los campos de longitud (geometry.coordinates[0]), latitud (geometry.coordinates[1]) y el valor asignado al punto (properties.value).

Además de los puntos con valores, para generar el mapa de calor es preciso definir la zona de estudio, entendiendo como tal el rectángulo que delimita los puntos que se tendrán en consideración. Así, para el grupo de puntos del tutorial, un posible rectángulo delimitador podría ser el siguiente:

Open

De dicho rectángulo lo que interesa conocer no es la geometría del mismo, sino las coordenadas de los límites superior, inferior, izquierdo y derecho. Esto, aunque es sencillo de obtener con un programa GIS, puede no serlo tanto si hay que hacerlo a mano. Una recomendación es coger el punto que se encuentre más 'arriba', y aumentar el valor de su coordenada de latitud (geometry.coordinates[1]), para que quede algo más al norte. Repitiendo esto para los otros lados, se obtendrían las coordenadas.

Otra posibilidad algo más sencilla pero técnica, consistiría en poder dibujar dos puntos; uno correspondiente al vértice superior izquierdo del rectángulo, y otro al vértice inferior derecho. Con esos dos puntos se obtienen cuatro coordenadas en total, correspondientes a los cuatro bordes del diagrama. Veámoslo en el siguiente ejemplo:

Open

Y ya está; teniendo esta idea en mente, generar mapas de calor en Cesium es algo bastante sencillo.

Vista toda la teoría, pasemos a generar el mapa de calor como el del ejemplo de antes.

En primer lugar, se procederá a obtener los datos de las entidades de puntos, que se encuentran en una ontología servida por un servicio REST. Para ello se hará uso de AJAX, por lo que en el <head> de la página web se introducirá una llamada a una librería de jQuery.

Seguidamente, en el código javascript del visor de Cesium, se hará la llamada al servicio REST mediante el siguiente código:

A continuación, se definirá una variable que contendrá un objeto con los límites del rectángulo antes definido:

También se creará otra variable que definirá las propiedades de configuración del mapa de calor. De momento, se indicarán las más básicas, y más adelante se entrará en detalle cómo personalizar el mapa de calor.

Seguidamente se generará una instancia de CesiumHeatmap utilizando CesiumHeatmap.create(). Dicha instancia se configura con tres miembros:

• El visor del mapa: entendiéndose como tal el objeto ‘viewer’ que define el visor.

• Los límites de interpolación: que corresponde con los límites del rectángulo antes definido.

• Una serie de propiedades de configuración: que acabamos de crear.

Así, una instancia básica quedaría definida como:

Por último, sólo queda añadir los datos al visor, indicando el formato en el que se encuentran las coordenadas del visor. Existen dos posibilidades:

• setData(): para datos en coordenadas X e Y (del estilo UTM).

• setWGS84Data(): para datos en coordenadas de longitud y latitud.

En ambos casos, la función recibirá de parámetros de entrada:

• Valor mínimo y máximo de la interpolación: para un rango de valores dados, cuanto más se aproxime el valor mínimo y máximo a los valores mínimos y máximos de los puntos, mayor será el efecto visual de diferenciación en la interpolación (los colores serán más extremos).

• Listado de entidades de puntos: con sus valores de pesos.

Para el caso de los datos del ejemplo, puesto que se encuentran definidos con coordenadas de longitud y latitud, quedaría como:

En este caso, el valor 15 correspondería con el valor mínimo a considerar en la interpolación, 26 el valor máximo, y data serían los valores de los puntos de la ontología según el formato { x: longitude, y: latitude, value: weight }.

Para obtener dichos valores, se puede generar una función que itere cada elemento de la ontología, devolviendo un listado con los valores de coordenadas y pesos de cada uno, pasando posteriormente dicho listado a la función de generación de los mapas de calor. En el caso de la ontología de ejemplo, la función utilizada es la siguiente:

Entonces, la función para añadir los datos quedaría de la siguiente forma, entendiendo como jsonData el objeto que devuelve la función donde se encuentra el código:

Hecho esto, visualizando el mapa debería verse el mapa de calor tal como:

Las opciones de personalización del mapa de calor son las siguientes:

• useEntitiesIfAvailable: indica si se deben usar entidades para la generación del mapa de calor (true) o si siempre se usa un proveedor de imágenes (false). Por defecto es true.

• minCanvasSize: tamaño mínimo (en píxeles) para el canvas del mapa de calor. Por defecto es 700.

• maxCanvasSize: tamaño máximo (en píxeles) para el canvas del mapa de calor. Por defecto es 2000.

• radius: el tamaño de la interpolación de cada punto. Si el radio es insuficiente y no llega a tocar otro punto, el resultado será una serie de círculos concéntricos.

• radiusFactor: factor de tamaño que se utiliza si no se indica un radio. El valor corresponde a la altura y anchura mayores divididas por este factor genera el valor del radio a utilizar. Por defecto es 60.

• spacingFactor: espacio adicional alrededor de los bordes de la zona de análisis. El espaciado extra se calcula multiplicando el radio de los puntos por este valor. Por defecto es 1.5.

• maxOpacity: valor de opacidad máxima que se utiliza. Por defecto es 0.8.

• minOpacity: valor de opacidad mínimo que se utiliza. Por defecto es 0.1.

• blur: valor de desenfoque a representar. Por defecto es 0.85.

• gradient: colección de colores y límites que conforma el gradiente de colores del mapa. Por defecto es:
  
  

  • '.3': 'blue',

  • '.65': 'yellow',

  • '.8': 'orange',

  • '.95': 'red'

Open

A menos que la situación lo requiera, es mejor interactuar únicamente con las propiedades de radio, opacidades máxima y mínima, desenfoque y gradiente, puesto que las otras no dan un resultado visual tan directo y su modificación puede llegar a generar aberraciones según los valores a representar en el mapa de calor (o directamente no notar ningún cambio aparente).

Respecto a la simbología del mapa de calor, esta se consigue modificando las opciones del gradiente. Cada rango de gradiente se encuentra definido por el valor de corte del gradiente (por debajo un color, por encima otro color; .65 por ejemplo significa que por debajo de ese valor tendrá al amarillo, y por encima de ese valor al naranja), y el valor del color a utilizar. Dicho color está basado en CSS, por lo que acepta tanto el valor nombre del color (blue) como el valor hexadecimal del color (#0000FF).

A continuación se muestra el mapa de calor con distintos valores de gradiente:

Open

A continuación se muestra el código utilizado en el visor de ejemplo.