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



GeoServer 正在提供地图框矢量切片图层(大约 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
});
});

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

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

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

最新更新