Mapbox. 通过点击聚类获取点列表

Question

我使用Mapbox GL JS，并且在使用聚类时遇到了问题。我添加了一些图层，希望通过单击群集来获取聚类点列表。

map.on('click', function(e) {
    var cluster = map.queryRenderedFeatures(e.point, { layers: ["cluster"] });

    if (cluster.length) {
        // get clustered points here
        console.log(cluster[0]);
    }
});

jsfiddle上的工作示例 https://jsfiddle.net/L3hm8rur/

- Anatoliy Novoselov

---

更新 -- 此功能正在github.com/mapbox/supercluster/pull/31上积极开发中。 - mollymerp

Answer 1

这个功能现在已经在Mapbox GL JS库中支持。

这里是API文档-https://www.mapbox.com/mapbox-gl-js/api/#geojsonsource#getclusterchildren

如何获取聚类下的点？

map.on('click',/* cluster layer id */ 'clusters', function (e) {

  var features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
  var clusterId = features[0].properties.cluster_id,
  point_count = features[0].properties.point_count,
  clusterSource = map.getSource(/* cluster layer data source id */'cluster-source');

  // Get Next level cluster Children
  // 
  clusterSource.getClusterChildren(clusterId, function(err, aFeatures){
    console.log('getClusterChildren', err, aFeatures);
  });

  // Get all points under a cluster
  clusterSource.getClusterLeaves(clusterId, point_count, 0, function(err, aFeatures){
    console.log('getClusterLeaves', err, aFeatures);
  })

});

- Ashish Singh

Answer 2

编辑：最近的mapbox-gl-js版本已经官方支持此功能，因此您无需使用下面我建议的解决方法。有关更多信息，请参见其他答案。

不幸的是，目前不支持您正在寻找的行为。聚类图层不包含聚类中个别点的数据。

一种解决方法是过滤您的GeoJSON源以获取与单击点距离小于clusterRadius的点，这将为您提供所需的点。

JSFiddle：https://jsfiddle.net/aznkw784/

• 免责声明-我在Mapbox工作

- mollymerp

---

此功能现已得到支持。https://dev59.com/aFkT5IYBdhLWcg3wZusA#52344700 - Ashish Singh

Answer 3

正如 @mollymerp 先前提到的，supercluster 有一个方法 getChildren(clusterId, clusterZoom)，它将返回聚类中的子项。

---

EDIT

https://jsfiddle.net/denistsoi/bhzr6hpt/3/

对于上面的示例 - 我使用了getLeaves方法，但更好的方法是系统地调用getChildren并逐步缩小每个后续缩放级别，以确定在各自的聚类中存在什么。

---

// GEOJSON being the valid geojson source
map.addSource('data', { 
   type: 'geojson', 
   data: [GEOJSON] 
}); 

map.on('click', function(e) {
  var cluster = map.queryRenderedFeatures(e.point, { layers: ["cluster"] });

  if (cluster.length) {
    // load values to determine cluster points & children

    var superc = supercluster({
       radius: 40,
       maxZoom: 16
    })

    superc.load(map.getSource('data').serialize().data.features);

    var children = superc.getChildren(0, map.getZoom());
    console.log(children); // returns array of children from clustered point;
  }
});

- Denis Tsoi

---

我忘记在supercluster中添加params对象了 - 这可能会解决你的问题 @Prince - Denis Tsoi

请访问以下链接查看我的代码：https://stackoverflow.com/questions/45003613/how-can-i-show-the-count-of-points-in-the-particular-latitude-and-longitude-in-m - Gnik

尽管已更新为supercluster（{radius：40，maxZoom：16}），但仍然出现“supercluster不是函数”的错误。 - Gnik

@Prince，请检查上面的JSFIDDLE并进行编辑（您在示例中没有包含supercluster）。 - Denis Tsoi

额，老实说我不知道伙计，我的JSFIDDLE示例可以在你点击聚类时显示子属性... - Denis Tsoi

Answer 4

           clusterSource.getClusterLeaves(clusterId, pointCount, 0, function (error, features) {
                // Print cluster leaves in the console
                console.log('Cluster leaves:', error, features);

                //build the bounding box with the selected points coordinates
                bounds = new (mapboxgl.LngLatBounds)();
                features.forEach(function (feature) {
                    bounds.extend(feature.geometry.coordinates);
                });
                //Move the map to fit the Bounding Box (BBox)
                return map.fitBounds(bounds, {
                    padding: 45, //orig 45
                    maxZoom: 16
                });

- Twang56

---

请不要仅仅发布代码作为答案，还需要提供对代码的说明，包括它是如何解决问题的。有解释的答案通常更有帮助、质量更高，并且更有可能获得赞同。 - Ran Marciano