Question

我使用以下Javascript代码为地图上的雷达图层设置动画：

function updateLayer() {

    window.requestAnimationFrame(updateLayer);     

    var now = Date.now();
    elapsed = now - then;      

    if (elapsed > fpsInterval) {
        //fpsInterval being 1000 / 10 or 1000 / 60
        then = now - (elapsed % fpsInterval);

        updateLayerImage();

    }

}

updateLayerImage（）以5分钟为间隔循环浏览最近3个小时的雷达图像。

但是，这会导致动画非常慢（约1-2 fps）。这是我所做的事情：

由于我是直接从官方天气源加载雷达图像，每个图像的大小约为500 KB到3 MB，因此我认为这可能是每秒加载60次的瓶颈。因此，我编写了一个独立的脚本，该脚本将最近3个小时的雷达图像缓存在自己的服务器上，从而提供了更快的连接速度。结果只有很少的改善。
我更改了缓存代码，以将图像分别压缩到大约300 KB，这应该使其速度更快，但并没有太大帮助。
我不是Java语言方面的专家，并且不确定如何在客户端浏览器中“缓存”图像，因此我执行以下操作：下载图像后，我将其添加为简单（隐藏）的img src = “” id =“”标签。一旦我的updateLayerImage（）循环回到同一张图片，我就不再从服务器上再次加载它，而是实际上重复使用了这张图片。
Mapbox GL JS不支持，但是仅更新图像源的图像，而仅更新其URL，这使得它再次下载。因此，我下载了Mapbox GL JS代码，并将图像源文件更改为具有将HTMLImageElement作为参数并将其分配给源的函数，而无需下载任何内容。 Yarn安装了代码并嵌入了我自己的Mapbox GL JS文件，然后您就可以将所有图像加载到HTML页面中，而不会发生网络连接。仍然还不算快。

我没有主意，因为我的图像相对较小，所以我不会多次从Internet加载它们并重复使用它们。但是我的fps仍然很低。我开始认为这是Mapbox GL JS的局限性...

如何提高fps？

编辑： 测量updateLayerImage()的执行时间会导致持续时间从45毫秒变化到2毫秒以下！在updateLayerImage()内部，我在触发dataloading事件的image_source.js文件中调用Mapbox GL JS的函数，将新图像分配给它的图像变量，然后调用_finishLoadinig（）激发{{1 }}事件。我认为，这种图像渲染魔术中的一些需要花费很多时间。有什么方法可以简单地重新分配image变量并触发简单的重新绘制？

Mapbox GL JS图层动画低fps

0 个答案: