Cómo crear un heatmap con OpenLayers

por

Un mapa de calor o heatmap es una representación visual de los datos en la que se muestra una gama de colores para mostrar los datos, permitiendo conocer en qué lugares la concentración de datos es mayor.

En otra entrada hemos explicado cómo crear un heatmap en GeoServer. Pero en esta ocasión vamos a prescindir del servidor para no sobrecargarlo y será el navegador del cliente el que se encargará de realizar este renderizado.

El equipo de desarrolladores de OpenLayers ha lanzado oficialmente la primera versión estable (3.0.0) en septiembre de 2014 y unas de las novedades que trae es la posibilidad de crear un heatmap de una manera sencilla.

OpenLayers nos proporciona la clase ol.layer.Heatmap, esta clase es una subclase de ol.layer.Vector, que nos permite el acceso y representación de datos vectoriales.

Para utilizar la clase ol.layer.Heatmap utilizaremos como fuente de datos origen (source) una capa vectorial:

var heatmap = new ol.layer.Heatmap({ 
  source: new ol.source.Vector({ 
  url: 'cities.json', 
  format: new ol.format.GeoJSON() 
}) 
});

En el código anterior hemos instanciado una capa y la hemos denominado heatmap, cuya fuente es un archivo GeoJSON, dentro de las propiedades del GeoJSON debemos especificar la url en la que se encuentra el archivo .json y el formato, que en este caso es GeoJSON, aunque se podría utilizar otra fuente vectorial como un KML.

Una vez creada la capa heatmap solo tendremos que añadirla al mapa, la incluimos en la propiedad layers, junto con la capa de OpenStreetMap:

var map = new ol.Map({ 
  ... 
  layers: [LayerOSM, heatmap] 
  ... 
});

 

Este sería el resultado:

Puedes ver el código completo utilizado para crear este mapa descargando el html utilizado:

https://mappinggis.com/visores_webmapping/ol3_heatmap.html

y abriéndolo con un editor de texto.

Otro ejemplo de creación de un heatmap con OpenLayers en la página de ejemplos de OpenLayers.

¿Quieres aprender a crear mapas web como el que hemos visto? Apúntate ya a nuestro curso online desarrollo de aplicaciones webmapping.

 

Los comentarios están cerrados.