Integración de supercúmulos de capas abiertas: ¿es posible obtener las características subyacentes de cada cúmulo?

Question

Por el momento estoy utilizando el open layers 3 con supercluster, ampliando el ejemplo proporcionado aquí : https://jsfiddle.net/d5gwvz2y/2/

Mi pregunta es: ¿Cómo se obtienen todas las características subyacentes detrás de un clúster si se hace clic en él? En la implementación de clústeres de capas abiertas se podría utilizar clúster forEachFeature, o simplemente getFeatures.

A continuación se muestra una muestra del funcionamiento de los clústeres utilizando la implementación de clústeres por defecto http://www.wwarn.org/surveyor/NMFI/ cuando se hace clic en un clúster, se devuelve una matriz de características, que luego se puede iterar.

Answer 1

Tuve que hacer algunos cambios en el violín para que funcionara. Lo que cambié:

1. Utilice última versión de Supercluster (2.3.0) porque tiene una nueva función llamada getLeaves que necesitas (ver 3.).
2. Crear un FeatureCollection (para tener la ventaja de identificar las características por propiedades - por ejemplo, el nombre) y cargarlo con el supercluster:

var count = 200000;

// create featurecollection
var featureCollection = {
  "type": "FeatureCollection",
  "features": []
};

// add features to featurecollection
for (var i = 0; i < count; ++i) {
    var feature = {
    "type": "Feature",
    "properties": {
      "name": "point_"+i
    },
        "geometry": {
            "type": "Point",
            "coordinates": [(Math.random() * (-78.31801021112759 + 74.65681636347132) - 74.65681636347132).toFixed(10), (Math.random() * (37.92771687103033 - 39.366988155008926) + 39.366988155008926).toFixed(10)]
        }
    };
    featureCollection.features.push(feature);
}

// create supercluster
var index = supercluster({
    radius: 100,
    maxZoom: 16
});
index.load(featureCollection.features);

3. Utilice getLeaves(clusterId, clusterZoom, limit = 10, offset = 0) en su evento de selección (como se describe en el proyecto de supercúmulo ):

selectSingleClick.on('select', function (selectEvent) {
  // get selected feature
  var feature = selectEvent.selected[0];
  // get parameter to call getLeaves
  var zoom = map.getView().getZoom();
  var clusterId = feature.get("cluster_id");
  // get features in cluster
  var featuresInCluster = index.getLeaves(clusterId, zoom, Infinity, 0);

  // iterate over features (NO ol.Feature objects!)
  for(let clusterObj of featuresInCluster){
    // do stuff with your feature!
  }
});

Echa un vistazo a este trabajo JSFiddle .

EDITAR: He actualizado el JSFiddle para que se ajuste a los requisitos de la pregunta de hacer un bucle a través de los elementos hijos resultantes...

Tenga en cuenta que no se accede a las funciones del clúster como ol.Feature porque el acceso se realiza con supercluster no openlayers ¡! Si fuera necesario, podría acceder a las características en openlayers buscando ciertas propiedades para identificar la característica (por ejemplo, la propiedad name en el JSFiddle proporcionado).

Answer 2

Depende del superclúster que utilices. Supongo que es el Superclúster de Mapbox que por suerte para ti ha implementado el método getLeaves() el 2017 Ene 18.

El método fue implementado en particular para el propósito que usted está buscando ( usted no fue el primero en preguntar :-) ), y fue implementado con la flexibilidad en mente también (paginación).

El pull request también muestra una explicación detallada de los parámetros de esta función, sólo los copio aquí como referencia:

index.getLeaves(
    clusterId, // cluster_id property of the clicked cluster
    zoom,      // zoom of the clicked cluster
    limit,     // how many points to return; 10 by default
    offset);   // how many points to skip for pagination; 0 by default

Si quieres obtener todos los puntos de un clúster, pon limit a Infinity (¡sí, es un valor válido!), o utilizar un valor negativo como -1 .

Si intenta recuperar una gran cantidad de datos de puntos (por ejemplo, todos los 200k puntos del ejemplo), probablemente tendrá graves problemas de rendimiento, además de que tampoco podrá mostrar esa información de una sola vez de forma sensata. Teniendo en cuenta su otro ejemplo (mostrar los detalles de un estudio representado por un punto), podría utilizar los parámetros adicionales (límite, desplazamiento) para solicitar sólo los datos necesarios: Haga clic en el cluster para abrir la ventana emergente/información, pero sólo solicite una parte de los datos (por ejemplo, los diez primeros estudios), mostrando los primeros de inmediato. Luego, sólo cuando el usuario seleccione uno de los otros estudios, hacer otra solicitud para el siguiente trozo de estudios. No es necesariamente relevante para esta pregunta, pero una rápida introducción a la paginación nunca está de más para los lectores de stackexchange ;) : Es una gran manera de mejorar la UX, con un mejor rendimiento que permite formas más elegantes de presentar los datos.

El pull request relevante&mergido (Mi reputación me limita a sólo dos enlaces, así que tuve que "romper" el enlace. Sólo hay que añadir https:// delante):
github.com/mapbox/supercluster/pull/32

Y si quieres la historia de fondo del pull request también:
github.com/mapbox/mapbox-gl-js/issues/3318