mapbox-gl-js：矢量切片 - 在客户端实现 Change/Add 特征 属性 的最有效方式？

Question

GeoServer 正在提供一个 mapbox-vector-tile 图层（大约 500K 个特征点和多行字符串）。

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

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

[{ 编号：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 方法，它奏效了。问题，这样做之后地图非常慢。我相信这是因为我需要为 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