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

Question

语境：

• Angular 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查询，我可以通过执行另一个查询来“动态”过滤，并重新渲染源和所有层。

问题出在大数据集上（大约100k点）。这太慢了。

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

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

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

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

现在的问题是表达“匹配”限制太多

例如：'Platanus'将匹配所有Platanus树，但'Platan'将找不到任何东西。

我看到Github问题在Mapbox GL JS上已经开放2年了（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']
]]

显然它很难看，但这就是解决方法的本质。