时间 series/animated 具有大矢量瓦片数据集和 Mapbox GL JS 的热图
Time series/animated heatmaps with big vector tile datasets and Mapbox GL JS
我正在开展一个项目，该项目使用大点数据集（同时显示多达数十万个点）在浏览器中呈现为动画热图 Pixi.JS，在 [=55 之上=] 地图。这些点具有时间戳，并在客户端根据时间范围过滤器进行动态过滤。
这种方法开始显示出它在性能方面的局限性（巨大的 CPU 瓶颈），所以我正在寻找基于 Mapbox GL JS 的解决方案来呈现这些点。
到目前为止，我已经尝试过 3 种不同的方法，但未能获得具有这么多点的流畅动画：
- 更新显示点
setFilter:
map.setFilter('layer', ['all', ['>', 'datetime', t0], ['<', 'datetime', t1]])
- 使用
setPaintProperty和GL JS表达式改变点的视觉属性：
map.setPaintProperty('layer', 'circle-radius', [
'case',
['<', ['number', ['get', 'datetime']], t],
5,
['>', ['number', ['get', 'datetime']], t],
0,
0
])
这两种方法都很慢，或者更确切地说，可以达到一些可接受的帧率，但用户交互和视觉更新之间存在巨大的滞后。
- Ryan Baumann 在这里建议使用
setData 更新输入数据集：
该方法的问题在于它不适用于以矢量切片形式出现的大数据集。即使尝试使用一个大的 GeoJSON 文件，结果也和前两种方法一样慢。
我准备探索某种可以位于我的矢量图块和 Mapbox GL JS 之间的自定义 renderer/shader，但自定义 webGL 图层类型似乎处于开发阶段：
https://github.com/mapbox/mapbox-gl-js/issues/281
谢谢
埃里克
您可以看看 'deck.gl'，它宣传将大型数据集叠加到 mapboxgl 地图上的良好结果。我没有直接的经验，所以我真的可以说更多。
我正在开展一个项目，该项目使用大点数据集（同时显示多达数十万个点）在浏览器中呈现为动画热图 Pixi.JS，在 [=55 之上=] 地图。这些点具有时间戳，并在客户端根据时间范围过滤器进行动态过滤。
这种方法开始显示出它在性能方面的局限性（巨大的 CPU 瓶颈），所以我正在寻找基于 Mapbox GL JS 的解决方案来呈现这些点。
到目前为止，我已经尝试过 3 种不同的方法，但未能获得具有这么多点的流畅动画：
- 更新显示点
setFilter:
map.setFilter('layer', ['all', ['>', 'datetime', t0], ['<', 'datetime', t1]])
- 使用
setPaintProperty和GL JS表达式改变点的视觉属性：
map.setPaintProperty('layer', 'circle-radius', [
'case',
['<', ['number', ['get', 'datetime']], t],
5,
['>', ['number', ['get', 'datetime']], t],
0,
0
])
这两种方法都很慢，或者更确切地说，可以达到一些可接受的帧率，但用户交互和视觉更新之间存在巨大的滞后。
- Ryan Baumann 在这里建议使用
setData更新输入数据集：
该方法的问题在于它不适用于以矢量切片形式出现的大数据集。即使尝试使用一个大的 GeoJSON 文件，结果也和前两种方法一样慢。
我准备探索某种可以位于我的矢量图块和 Mapbox GL JS 之间的自定义 renderer/shader，但自定义 webGL 图层类型似乎处于开发阶段：
https://github.com/mapbox/mapbox-gl-js/issues/281
谢谢
埃里克
您可以看看 'deck.gl'，它宣传将大型数据集叠加到 mapboxgl 地图上的良好结果。我没有直接的经验，所以我真的可以说更多。