我使用 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/
【问题讨论】：
编辑：这在最新版本的 mapbox-gl-js 中得到官方支持，因此您不需要使用我在下面建议的解决方法。有关更多信息，请参阅其他答案。
很遗憾，您正在寻找的行为目前不受支持。聚类层不包含聚类中各个点的数据。
一种解决方法是过滤您的 GeoJSON 源中的点，以查找距单击点的 clusterRadius 距离内的点，这将为您提供您正在寻找的点。
JSFiddle：https://jsfiddle.net/aznkw784/
【讨论】：
正如@mollymerp 前面提到的，supercluster 具有方法getChildren(clusterId, clusterZoom)，它将从集群中返回子节点。
编辑
对于上面的示例 - 我使用了 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;
}
});
【讨论】：
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);
})
});
【讨论】：
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
});
【讨论】：