时间戳

首页 > 解决方案 > OpenLayers 6 具有大量点的高频率层更新

javascript - OpenLayers 6 具有大量点的高频率层更新

问题描述

我目前正在使用 OpenLayers 6 来显示由移动地图应用程序生成的地理数据。这包括每秒更新多达 10 次的“实时”GPS 位置。通过更新图层上的功能，我可以毫无问题地以这种速度运行我的应用程序。

第二个功能是让 GPS 在地图上留下“面包屑”。这些点每秒添加 10 次到特定层。在我遇到问题之前，我一直在使用WebGLPointsLayer这些点来显示这些点，这些点将性能大幅提高到稳定的 25.000 点。使用以下代码添加点：

层初始化：

this.gpsBreadcrumbsLayer = new WebGLPointsLayer({
    source: new Vector({}),
    style: {
        symbol: {
            symbolType: 'circle',
            size: 10,
            color: 'rgba(0,0,255,1)'
        }
   }
});

根据接收到的 lonLat ([lon, lat]) 添加特征

const source = this.gpsBreadcrumbsLayer.getSource();
source.addFeature(new Feature(new Point(fromLonLat(lonLat))));

我正在寻找一种高性能解决方案，它允许我在地图上绘制超过 ±25k 点，而不会影响地图的性能和响应能力。我见过可以轻松处理 ±250k 点的示例，但是这些点是一次性加载的，并且这些点不会以每秒 10 次的速度动态添加。

我也不确定 OpenLayers 在底层是如何工作的，但从性能方面来看，当添加一个特性时，OpenLayers 似乎正在重绘整个层，因为它会随着时间的推移逐渐降低性能。每当我停止添加点时，我都会看到性能恢复，即使已经生成的点仍在地图上。

TL;DR我需要一种方法来每秒动态地将 10 点添加到可以轻松达到 100.000 点而不会显着影响性能的图层。WebGLPointsLayer对我有很大帮助，但在达到 20/25 千分时会减慢我的速度。

标签： javascriptperformancewebglopenlayers

解决方案

我在地图上绘制要素时遇到了性能问题，并通过首先将它们添加到数组中来解决它，然后在所有要素都在数组中之后将它们全部添加到源中。我在这里猜测，但是一次添加每个功能可能会产生相当大的开销，而通过一次添加所有功能可以缓解这种情况。

// Array 
newFeatures.push(feature);

然后在其他地方一次将它们全部添加到源中。

vectorSource.addFeatures(newFeatures);

这有助于让我用大约 2000 个文本绘制大约 25000 个特征。

推荐阅读