Mapbox-gl-js 过滤标记簇

Question

我们现在可以在 gl-js 中对标记进行聚类:

https://www.mapbox.com/mapbox-gl-js/example/cluster/

在 mapbox-gl-js 中的聚类中是否有与此示例中的传单中的标记过滤器等效的方法:

https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering-marker-clusters/

Answer 1

我也遇到过这个问题，我相信应该有一种方法可以根据集合中要素的属性进一步过滤簇层。但是根据我的理解(我真诚地希望有一个我还没有想出的更好的方法)，没有办法区分聚类特征，因为你在源上声明它是聚类的。我想出的一个解决方法是在过滤器更改时动态添加源和图层。

例如:如果您按子类别 ID 进行过滤，则可以削减与该子类别 ID 匹配的原始 FeatureCollection，并使用该 FeatureCollection 创建一个新源，并将 cluster 设置为 true，为标记添加图层，然后添加你的集群层，就像他们在他们的例子中布置的那样。每当过滤器发生变化时，您都可以切换该标记层的可见性(尚未测试该部分)，或者只是将其删除并添加新的重复之前的步骤。这种方法的一些缺点是无法对整个数据集(如果有的话)使用常规过滤器，而且它的性能不如使用过滤器。

如果您使用来自 mapbox 的地震数据，代码可能如下所示:

var data = "https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson";
var filterID = 1.87; // Arbitrary number
var paredData = _.filter(data.features, function(feature){
  if (feature["Primary ID"] === filterID) {
    return feature;
  }
})

// Remove all of the layers and source associated 
// with a previous filter if needed 
if (map.getSource("earthquake-filter") { 
  map.removeLayer("earthquake-filter");
  map.removeLayer("earthquake-filter-cluster");
  map.removeLayer("earthquake-filter-cluster-count");
  map.removeSource("earthquake-filter");
}

map.addSource("earthquake-filter", {
  type: "geojson",
  data: {
    type: "FeatureCollection",
    features: paredData
  },
  cluster: true,
  clusterMaxZoom: 14,
  clusterRadius: 50
});

然后像他们在示例中所做的那样继续。

这不是我最喜欢的解决方案，但它是迄今为止我找到的唯一有效的解决方案。希望这会有所帮助。