Mapbox-gl-js фильтрует кластеры маркеров

Я также столкнулся с этой проблемой и считаю, что должен быть способ дальнейшей фильтрации слоев кластера на основе свойства объектов в коллекции. Но, насколько я понимаю (и я искренне надеюсь, что есть лучший способ, который я просто еще не понял), нет способа различить сгруппированные функции, поскольку вы заявляете в источнике, что он должен быть сгруппирован. Обходной путь, который я придумал, состоит в том, чтобы динамически добавлять источник и слой по мере изменения вашего фильтра.

Например: если вы фильтруете по идентификаторам подкатегории, вы можете сократить свою исходную коллекцию объектов, которая соответствует этому идентификатору подкатегории, и создать новый источник с этой набором функций с кластером, установленным в значение 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
});

И продолжайте, как в примере.

Не мое любимое решение, но это единственное, которое работает до сих пор, которое я нашел. Надеюсь это поможет.