Mapbox 使用值数组过滤图层的问题

Question

我在过滤对话层时遇到问题。它似乎在路线层上工作得很好，即使两个层上都存在

route_long_name

属性，并且当我对功能进行手动过滤时，它会很好地过滤它们。这只是我不理解地图上的过滤器吗

const filterExpression = filters.routes.length > 0 ? [
      'match',
      ['get', 'route_long_name'],
      routes,
      true,
      false
    ] : undefined;

这在路线层上完美工作，但是当我在路线层上使用它时，类型为

Feature<
    MultiLineString,
    {
      tc_agency_id: string;
      route_id: string;
      route_long_name: string;
      shape_id: string;
      features: GeoJSON.Point[];
    }

但不在对话层

Feature<
    Point,
    {
      tc_agency_id: string;
      route_id: string;
      route_long_name: string;
      stop_id: string;
      stop_name: string;
    }
  >[];

奇怪的是，当我手动过滤功能时它工作正常

console.log({ 
  conversationsource: source._data.features.filter(item => routes.includes(item.properties.route_long_name)), 
  routesource: routesource._data.features.filter(item => routes.includes(item.properties.route_long_name)) 
})}

完整片段

const routes = filters.routes.map(el => el.routeLongName);
    const filterExpression = filters.routes.length > 0 ? [
      'match',
      ['get', 'route_long_name'],
      routes,
      true,
      false
    ] : undefined;
    const source = mapbox.map.getSource(MapSources.conversationsSource)
    const routesource = mapbox.map.getSource(MapSources.routesSource)
    if (source && routesource) {
      console.log({ 
  source: source._data.features.filter(item => 
    routes.includes(item.properties.route_long_name)), 
  routesource: routesource._data.features.filter(item => 
    routes.includes(item.properties.route_long_name)) })
}
    for (const layerId of [MapLayers.routesLayer, MapLayers.conversationsLayer]) {
      if (mapbox.map.getLayer(layerId)) {
        mapbox.map.setFilter(layerId, filterExpression)
      }
    }

Answer 1

我做了一些挖掘，结果发现集群在源级别而不是层级别起作用。

使用 Mapbox-gl-js 按 JSON 属性过滤聚类点

所以物品就在那里，但是缩放级别太高，无法看到过滤器起作用的区域。为了解决这个问题，我需要获取源并像这样设置数据。

const source = map.getSource(layerId)
const sourceData = mapState[layerId].filter(feat => filterFeature(feat))
source.setData(sourceData)