Mapbox-gl-js过滤标记簇

时间:2016-03-23 13:25:43

标签: mapbox-gl-js

我们现在可以在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/

1 个答案:

答案 0 :(得分:1)

我也遇到过这个问题,并且相信应该有一种方法可以根据集合中功能的属性进一步过滤集群层。但是根据我的理解(我真诚地希望有一种更好的方式,我还没有想到),因为你在源头上声明它是不可能的,所以没有区分群集功能的方法。集群。我提出的解决方法是在过滤器更改时动态添加源和图层。

例如:如果您按子类别ID进行过滤,则可以减少与该子类别ID匹配的原始FeatureCollection,并使用该群集设置为true的FeatureCollection创建新的源,添加您的图层对于标记,然后像他们在示例中列出的那样添加您的集群层。只要过滤器发生变化,您就可以切换该标记图层的可见性(避免测试该部分),或者只是将其删除并添加重复过去那些步骤的新标记图层。这种方法的一些缺点是无法在整个数据集中使用常规过滤器(如果有的话),并且它不像使用过滤器那样高效。

如果您使用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
});

继续他们在示例中的做法。

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