Mapbox数组值过滤图层异常：对话图层失效但手动过滤正常

问题描述 #

在Mapbox中使用match过滤表达式时，路线图层（要素类型为Feature<MultiLineString, {tc_agency_id: string; route_id: string; route_long_name: string; shape_id: string;}>）可正常过滤，但对话图层（要素类型为Feature<Point, {tc_agency_id: string; route_id: string; route_long_name: string; stop_id: string; stop_name: string;}>[]）完全不生效。

使用的过滤表达式如下：

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

奇怪的是，用JavaScript原生filter方法手动过滤两个数据源的要素时，都能得到正确结果：

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)
  }
}

问题原因 #

Mapbox的match表达式对数组参数有严格要求：必须传入字面量数组，不能直接使用变量引用。你的代码中直接把routes变量传给match，对话图层的数据源（比如GeoJSON类型）可能因底层解析逻辑无法识别变量引用，而路线图层刚好兼容了这种写法，或数据源类型差异导致表现不同。

另外需确认对话图层要素的route_long_name字段名完全一致（无大小写、拼写偏差），不过从原生filter能生效来看，这个概率较低。

解决方法 #

方法1：展开数组为字面量参数 #

将routes数组元素直接展开到match表达式中，让解析器明确看到每一个值：

const filterExpression = filters.routes.length > 0 ? [
  'match',
  ['get', 'route_long_name'],
  ...routes, // 用扩展运算符展开数组元素
  true,
  false
] : undefined;

方法2：改用in表达式 #

如果routes数组较长，match展开过于繁琐，可换成in表达式——它支持直接传入数组变量，逻辑是判断属性值是否存在于指定数组中：

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

额外排查点 #

• 确认对话图层数据源类型：若为矢量瓦片，需确保瓦片数据中route_long_name字段存在且格式正确；若为GeoJSON，可刷新数据源后再测试过滤。
• 检查图层可见性：避免因图层本身被隐藏，导致过滤效果看起来未生效。

内容的提问来源于stack exchange，提问作者AvidDabbler