Javascript OpenLayers 6性能不佳的矢量层，包含多边形和线串

当我显示超过2000个多边形和/或线串时，就会出现问题，地图的平移和缩放速度会变慢，osm瓷砖的加载速度也会变慢。当视口中可见的要素较少（放大或平移要素）时，问题就消失了。我不认为这是一个样式问题，因为它也发生在标准openlayers样式中

由于代码片段的局限性，我只能将真实数据的一些特性添加到映射中，不幸的是，对于这么多的数据，问题并不明显。但也许有人能发现代码中的错误，或者有更好的方法在矢量层上显示大量多边形/线串

.地图{
高度：95vh；
宽度：100%；
}
OpenLayers示例
我的地图
变量geoJsonData={
“crs”：{
“类型”：“名称”，
“财产”：{
“名称”：“EPSG:28992”
}
},
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“几何学”：{
“类型”：“多边形”，
“坐标”：[
[
[
685441.262918955,
7022605.59
],
[
685441.039740355,
7022586.08
],
[
685438.582036506,
7022584.54
],
[
685436.865980189,
7022584.1
],
[
685434.284371417,
7022583.44
],
[
685434.261433221,
7022585.66
],
[
685435.181676638,
7022586.01
],
[
685436.736225901,
7022587.56
],
[
685436.7100026,
7022588.07
],
[
685436.571626044,
7022589.15
],
[
685436.530014489,
7022589.94
],
[
685436.323742369,
7022590.91
],
[
685436.103124509,
7022592.1
],
[
685435.779683307,
7022593.02
],
[
685435.386742883,
7022593.68
],
[
685435.074618194,
7022594.1
],
[
685434.412768294,
7022594.54
],
[
685433.80001363,
7022594.9
],
[
685432.853304886,
7022595.19
],
[
685431.872737418,
7022595.44
],
[
685429.855558338,
7022595.36
],
[
685429.073510219,
7022595.47
],
[
685428.626841421,
7022595.77
],
[
685428.399095635,
7022596.29
],
[
685428.254838334,
7022596.83
],
[
685428.115213326,
7022597.8
],
[
685428.370541637,
7022654.54
],
[
685428.382657063,
7022655.68
],
[
685428.405020634,
7022656.21
],
[
685428.376684955,
7022656.68
],
[
685428.365367803,
7022657.18
],
[
685428.005926213,
7022657.85
],
[
685427.608527838,
7022658.09
],
[
685425.602559711,
7022658.13
],
[