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/的工作示例

Answer 1

Mabox GL JS库现在支持该功能。

这是API Doc - 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);
  })

});

Answer 2

编辑：这在mapbox-gl-js的最新版本中得到官方支持，因此您不需要使用我建议的解决方法。有关详细信息，请参阅其他答案。

不幸的是，目前不支持您正在寻找的行为。群集层不包含群集中各个点的数据。

一种解决方法是过滤GeoJSON源，以获得距离点击点的clusterRadius距离内的点，这将为您提供所需的点数。

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

• 免责声明 - 我在Mapbox工作

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;
  }
});