具有大型矢量瓦片数据集和 Mapbox GL JS 的时间序列/动画热图

Question

我正在开发一个项目，使用大点数据集(同时显示多达数十万个点)在浏览器中使用 Pixi.JS 在谷歌地图之上渲染为动画热图。这些点具有时间戳，并在客户端按照时间范围筛选器进行动态筛选。

这种方法开始显示出它在性能方面的局限性(巨大的 CPU 瓶颈)，所以我正在寻找一个基于 Mapbox GL JS 的解决方案来渲染这些点。

到目前为止，我还没有成功地获得具有这么多点的流畅动画，查看了 3 种不同的方法：

1. 使用setFilter更新显示的点：

map.setFilter('layer', ['all', ['>', 'datetime', t0], ['<', 'datetime', t1]])

2. 使用setPaintProperty和 GL JS 表达式更改点的视觉属性：

map.setPaintProperty('layer', 'circle-radius', [ 'case', ['<', ['number', ['get', 'datetime']], t], 5, ['>', ['number', ['get', 'datetime']], t], 0, 0 ])

这两种方法都很慢，或者更确切地说，可以达到一些可接受的帧速率，但用户交互和视觉更新之间存在巨大的滞后。

3. Ryan Baumann 在这里建议使用setData更新输入数据集： MapBox GL JS 标记/图标动画性能缓慢

这种方法的问题在于，它实际上不适用于以矢量切片形式出现的大数据集。即使尝试使用大型GeoJSON文件，结果也与前两种方法一样慢。

我准备探索某种自定义渲染器/着色器，它可以位于我的矢量图块和 Mapbox GL JS 之间，但自定义 webGL 图层类型似乎处于开发阶段：

https://github.com/mapbox/mapbox-gl-js/issues/281

谢谢

埃里克

Answer 1

你可以看看"deck.gl"，它宣传了覆盖在mapboxgl地图上的大型数据集的良好结果。我没有直接的经验，所以我真的可以说更多。

https://github.com/uber/deck.gl