Cluster - Desarrollos-IDEE/API-IDEE GitHub Wiki

Cuando tenemos muchos elementos en un mapa, si el zoom es demasiado alejado, no conseguiremos distinguir unos elementos de otros. Para solucionar esto, una de las técnicas más utilizadas es la generación de clusters que agrupan los elementos dependiendo del nivel de zoom, desplegándose a medida que vamos acercando el mismo.

wiki_cluster1 En API-IDEE, se ha hecho una implementación completa de los clusters a través de la API de estilos y, siendo muy simple la generación de los clusters por defecto:

var mapajs = IDEE.map({
    'container': 'map'
});

var campamentos = new IDEE.layer.WFS({
    name: "Campamentos",
    url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/wfs",
    namespace: "sepim",
    name: "campamentos",
    geometry: 'POINT',
    extract: true
});

mapajs.addLayers(campamentos);
// se aplica un cluster por defecto
campamentos.setStyle(new IDEE.style.Cluster());

No obstante, también es posible su completa personalización, definiendo tanto los posibles rangos como su estilo concreto, así como parámetros generales de animación, muestra de número de elementos, etc.

let clusterOptions = {
    ranges: [{
        min: 2,
        max: 4,
        style: new IDEE.style.Generic({
          point: {
          stroke: {
            color: '#5789aa'
          },
          fill: {
            color: '#99ccff',
          },
          radius: 20
        }})
      }, {
        min: 5,
        max: 9,
        style: new IDEE.style.Generic({
          point: {
          stroke: {
            color: '#5789aa'
          },
          fill: {
            color: '#3399ff',
          },
          radius: 30
        }})
      }
        // Se pueden definir más rangos
    ],
    animated: true,
    hoverInteraction: true,
    displayAmount: true,
    selectInteraction: true,
    distance: 80,
    label: {          
     font: 'bold 19px Comic Sans MS', 
     color: '#FFFFFF'
    }
};
//generamos un cluster personalizado
let styleCluster = IDEE.style.Cluster(clusterOptions);
Parámetro Descripción
ranges {Array<Object>} - array de objetos con el valor mínimo, el máximo y un IDEE.style.Point
animated {boolean} - booleano que indica si se quiere animación o no al desplegar el cluster
hoverInteraction {boolean} - booleano que indica si se quiere mostrar el polígono que engloba los elementos al situarse sobre el cluster
selectInteraction {boolean} - booleano que indica si se quiere que al pinchar en un cluster se abra el abanico de puntos o no, por defecto true.
displayAmount {boolean} - booleano que indica si se muestra el número de elementos que componen el cluster
maxFeaturesToSelect {number} - Número máximo de elementos agrupados a partir de los cuales, al hacer click, se hará zoom en lugar de desplegar el cluster
distance {number} - distancia (en píxeles) de agrupación de elementos
label {<Object>} - Estilo opcional de la etiqueta de número de elementos de todos los rangos, si se muestra

El estilo cluster, al no ser más que una forma de visualización, puede utilizarse en conjunción con otros estilos.

Vendor params

Este conjunto de opciones está ligado a la implementación, por lo que se han separado de la configuración base. Actualmente solo existe la implementación de OpenLayers, por lo que los parámetros posibles serán:

Parámetro Descripción
distanceSelectFeatures {number} - distancia (en píxeles) entre los elementos desplegados de un cluster
convexHullStyle {Object} - estilo del polígono que engloba los elementos (si hoverInteraction es true) 
let vendorParameters = {
    distanceSelectFeatures: 25,
    convexHullStyle: {
        fill: {
            color: '#000000',
            opacity: 0.5
        },
        stroke: {
            color: '#000000',
            width: 1
        }
    }
}
// generamos un cluster personalizado al que, además, le indicamos 
// configuraciones de la implementación
let clusterStyle = new IDEE.style.Cluster(clusterOptions, vendorParameters);

Eventos

A la hora de interaccionar con elementos de una capa que ha sido clusterizada, nos encontramos con el problema de poder identificar si el elemento seleccionado es un cluster o no lo es; para ello, se ha tipado el cluster como IDEE.ClusteredFeature pudiendo distinguir en cualquier evento si es o no un cluster:

campamentos.on(IDEE.evt.SELECT_FEATURES, function(features, evt) {
      // se puede comprobar si el elemento seleccionado es un cluster o no
      if (features[0] instanceof IDEE.ClusteredFeature) {
        console.log('Es un cluster');
      }
});

vendorOptions

Permite cargar estilos de la librería base.

// Ejemplo de estilo sencillo con vendorOptios para el estilo cluster.
new IDEE.style.Generic(
    undefined,
    [
        new ol.style.Style({
            image: new ol.style.Circle({
                radius: 15,
                fill: new ol.style.Fill({
                    color: '#99ccff'
                }),
                stroke: new ol.style.Stroke({
                    color: '#5789aa'
                })
            })
        })
    ]
);

Ejemplos:

⚠️ **GitHub.com Fallback** ⚠️