Antes de implementar la funcionalidad de clustering en OpenLayers mediante un ejemplo práctico, es clave entender en qué consiste esta técnica y qué beneficios aporta.
¿Qué es el clustering y para qué sirve?
El clustering es una técnica utilizada para agrupar múltiples entidades (features) cercanas en una sola representación visual. Es especialmente útil en mapas que contienen una gran cantidad de puntos geográficos, ya que evita la saturación visual y mejora la experiencia de usuario.
Cuando muchas entidades están próximas entre sí (por ejemplo, marcadores de ubicaciones), el mapa puede volverse ilegible si se muestran todos a la vez. El clustering resuelve esto agrupando automáticamente las entidades en un solo símbolo, que puede mostrar cuántas entidades contiene. Al hacer zoom, los grupos se desagregan progresivamente hasta mostrar las entidades individuales.
Este enfoque resulta especialmente útil para:
- Aplicaciones web geográficas con muchos datos puntuales (observaciones, incidencias, POIs).
- Visualización de datos dinámicos o en tiempo real.
- Interfaces donde la claridad y el rendimiento son prioritarios.
¿Cómo funciona el clustering en OpenLayers?
OpenLayers utiliza la clase ol/source/Cluster, que toma como entrada una fuente vectorial (ol/source/Vector) y agrupa las entidades cercanas según la configuración de parámetros como:
distance: distancia en píxeles dentro de la cual las entidades se agrupan.minDistance: (opcional) separación mínima garantizada entre clusters.
Estos parámetros son suficientes para obtener un resultado visual limpio y funcional sin necesidad de personalizar el comportamiento avanzado del clustering con otros parámetros como:
geometryFunction(opcional): permite indicar qué geometría se utiliza como punto de cálculo para el clustering. Por defecto se usa el centro de la geometría (getGeometry()), pero puede ajustarse para casos como polígonos.createCluster(opcional): función personalizada para crear las entidades-cluster a partir del punto central y las features incluidas. Por defecto, devuelve unaFeaturecongeometryyfeatures.wrapX(opcional): indica si se repite el mundo en el eje X (útil para mapas globales).
* Puedes consultar la documentación oficial en este enlace: https://openlayers.org/en/latest/apidoc/module-ol_source_Cluster-Cluster.html
Para nuestro ejemplo vamos a utilizar dos capas en formato GeoJSON publicadas en GitHub:
- cat_c.json: puntos que agruparemos en magenta.
- cat_a.json: puntos agrupados en azul.
Cada grupo tendrá su propio estilo de cluster para facilitar la identificación visual.
Ejemplo básico: agrupación de puntos en OpenLayers con dos clusters diferenciados usando WFS reales
Vamos a dividir el ejemplo en partes para facilitar su comprensión:
1. Cabecera: enlaces necesarios y estilos
Incluye la hoja de estilo y el script principal de OpenLayers. También definimos los estilos para el mapa:
<!-- Enlace a la hoja de estilos de OpenLayers -->
<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" />
<!-- Script de OpenLayers -->
<script src="https://openlayers.org/en/v6.5.0/build/ol.js"></script>
<!-- Estilo básico para que el mapa ocupe toda la pantalla -->
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#map {
width: 100%;
height: 100vh;
}
.legend {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.8);
padding: 10px;
font-size: 14px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.legend-color {
width: 12px;
height: 12px;
margin-right: 8px;
border-radius: 50%;
}
.magenta { background: #cc3399; }
.blue { background: #3399cc; }
</style>
2. Contenedor del mapa y leyenda
Creamos el div que contendrá el mapa y una leyenda para explicar el significado de los colores:
<!-- Contenedor principal del mapa -->
<div id="map"></div>
<!-- Leyenda de colores para identificar cada capa -->
<div class="legend">
<div class="legend-item"><span class="legend-color magenta"></span> cat_c.json (magenta)</div>
<div class="legend-item"><span class="legend-color blue"></span> cat_a.json (azul)</div>
</div>
3. Inicializar la capa base
Creamos la capa de fondo utilizando OpenStreetMap:
// Capa base de OpenStreetMap
const baseLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
4. Cargar y agrupar puntos desde cat_c.json (magenta)
Esta capa se agrupa usando ol/source/Cluster y se representa con estilo magenta:
const clusterSourceC = new ol.source.Cluster({
distance: 40, // distancia en píxeles para agrupar
source: new ol.source.Vector({
url: 'https://raw.githubusercontent.com/erabasco/pruebas/refs/heads/main/cat_c.json',
format: new ol.format.GeoJSON({
defaultDataProjection: 'EPSG:3857',
featureProjection: 'EPSG:3857'
})
})
});
const layerC = new ol.layer.Vector({
source: clusterSourceC,
style: function (feature) {
const size = feature.get('features').length;
return new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({ color: '#cc3399' }),
stroke: new ol.style.Stroke({ color: '#fff' })
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({ color: '#fff' })
})
});
}
});
5. Cargar y agrupar puntos desde cat_a.json (azul)
Mismo proceso que la anterior, pero con color azul:
const clusterSourceA = new ol.source.Cluster({
distance: 40,
source: new ol.source.Vector({
url: 'https://raw.githubusercontent.com/erabasco/pruebas/refs/heads/main/cat_a.json',
format: new ol.format.GeoJSON({
defaultDataProjection: 'EPSG:3857',
featureProjection: 'EPSG:3857'
})
})
});
const layerA = new ol.layer.Vector({
source: clusterSourceA,
style: function (feature) {
const size = feature.get('features').length;
return new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({ color: '#3399cc' }),
stroke: new ol.style.Stroke({ color: '#fff' })
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({ color: '#fff' })
})
});
}
});
6. Inicializar el mapa
Creamos el mapa, añadimos todas las capas y centramos la vista:
const map = new ol.Map({
target: 'map',
layers: [
baseLayer,
layerC,
layerA
],
view: new ol.View({
center: ol.proj.fromLonLat([-3.5, 40.0]), // Centro aproximado de España
zoom: 6
})
});
// (Opcional) Captura de errores
map.on('error', function (event) {
console.error('Error en el mapa:', event);
});
A continuación te dejamos todo el código completo y, pulsando sobre «Edit in JSFiddle»,
podrás acceder a este entorno online para ejecutarlo, personalizar los estilos, cambiar los archivos GeoJSON o ajustar los parámetros de agrupación como distance y minDistance.
Como has podido comprobar, con estas pocas líneas de código, puedes convertir cualquier conjunto de puntos en un mapa interactivo con clustering, mejorando tanto la visualización como la experiencia de uso en tus aplicaciones cartográficas.
¿Quieres comentarnos algo? Adelante!