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

Question

A mapbox-vector-tile layer is being served from GeoServer (around 500K features points and multiline strings).

I am using mapbox-gl-js to plot the layer at client side and I use expressions to change certain styles(eg line color)

I have an external API which will provide me a list of properties for each asset

[{ id: 123, prop1: 45, prop2: 78 }, ...]

Now, I want to assign these properties to the corresponding features, so that I will be able to write expressions based on 'prop1' to manipulate the style.

Expression:

 [ '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'
      ]
 ];

I have tried using setFeatureState method and it worked. Problem, the map is terribly slow after doing this. I believe this is because I need to set the feature state for 500K features.

Setting feature state:

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

The color changes as per the given conditions. But the map itself becomes very slow after this. Is there any better way of mapping these properties from the client side?

Answer 1

Apparently there is no other way (as of now) using mapbox-gl-js

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