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文档-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)，它将从群集中返回子项。

修改

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

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

Mapbox。单击群集获取点列表

4 个答案:

修改