mapbox-gl-js：矢量图块 - 在客户端更改/添加功能属性的最有效方法？

Question

GeoServer 正在提供地图框矢量切片图层（大约 500K 个特征点和多行字符串）。

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

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

[{ id: 123, prop1: 45, prop2: 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 方法并且它有效。问题是，这样做后地图速度非常慢。我相信这是因为我需要为 500K 个特征设置特征状态。

设置功能状态：

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

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

Answer 1

显然没有其他方法（到目前为止）使用mapbox-gl-js

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