javascript - mapbox-gl-js:矢量切片 - 在客户端更改/添加特征属性的最有效方式？

Question

一个 mapbox-vector-tile 图层由 GeoServer 提供(大约 500K 个特征点和多行字符串)。

我正在使用 mapbox-gl-js 在客户端绘制图层，我使用表达式来更改某些样式(例如线条颜色)

我有一个外部 API，它将为我提供每个 Assets 的属性列表

[{ 编号:123， 支柱 1:45， 支柱 2:78 }, ...]

现在，我想将这些属性分配给相应的特征，这样我就可以编写基于'prop1'的表达式来操纵样式。

表达:

 [ 'let', 'load_value', ['to-number', ['get', 'prop1']],
      [
        'case',
        [ 'all', ['>=', ['var', 'load_value'], 0], ['<', ['var', 'load_value'], 50] ], 'gray',
        [ 'all', ['>=', ['var', 'load_value'], 50], ['<', ['var', 'load_value'], 70] ], 'yellow',
        ['>=', ['var', 'load_value'], 70], 'red',
        'gray'
      ]
 ];

我已经尝试使用 setFeatureState 方法并且它有效。问题，这样做之后 map 非常慢。我相信这是因为我需要为 50 万个功能设置功能状态。

设置功能状态:

   data.forEach((datum) => {
      this.map.setFeatureState({
        source: 'geoserver-source',
        sourceLayer: 'mvt-layer',
        id: datum.id
      }, {
        prop1: datum.prop1
      });
    });

颜色根据给定条件变化。但是在此之后 map 本身变得非常慢。有没有更好的方法从客户端映射这些属性？

Answer 1

显然没有其他方法(截至目前)使用 mapbox-gl-js

https://github.com/mapbox/mapbox-gl-js/issues/8753#issuecomment-531284256