Question

上下文：

角度6
Mapbox GL JS-v0.51（仅限于@ types / mapbox-gl-js版本）

我现在知道Mapbox GL JS不支持字符串值的过滤器包含/包含表达式（这是该主题的https://github.com/mapbox/mapbox-gl-js/issues/6484的摘要）

有没有办法模仿这种行为？

我曾经有一个GeoJSON来源：

this._map.addSource('geojson-source', {
      type: 'geojson',
      data: geojson,
    });

GeoJSON来自ElasticSearch查询，我可以通过执行另一个查询来“即时”过滤，然后重新呈现源和所有图层。

问题在于大型数据集（大约10万个点）。太慢了。

所以现在我们要使用MVT矢量源

this._map.addSource('vector-source', {
      type: 'vector',
      data: urlVector,
    });

我们使用此表达式按输入文本进行过滤：

filter: ['match', ['get', property], this.filterSearch, true, false]);

现在的问题是表达式“ match”过于严格

例如：“ Platanus”将与所有Platanus树匹配，但是“ Platan”将一无所获。

我发现，在Mapbox GL JS上，该主题的Github问题已经开放了两年（Android和iOS版本已使这些过滤器正常工作）。

在您的所有项目中，您如何找到家伙来破解/模仿这种行为？

您找到了办法，还是放弃了过滤器？ ^^

谢谢！

Answer 1

为澄清起见，我认为您正在寻求一种基于部分字符串匹配构建过滤器的方法：相当于^Platan正则表达式。如您所述，没有内置的机制。

一种解决方法是在收到数据集时将其转换为生成子字符串，或将字符串拆分为单个字符：

properties: {
  species: 'Platanus',
  species0: 'P',
  species1, 'l',
...

}

那么您的过滤器将是：

filter: ['==', 'Platan', ['concat',
  ['get', 'species0'],
  ['get', 'species1'],
  ['get', 'species2'],
  ['get', 'species3'],
  ['get', 'species4'],
  ['get', 'species5']
]]

显然这很丑陋，但这就是解决方法的本质。

Mapbox GL JS：通过输入文本过滤功能

1 个答案: