mapbox-gl - MapBox GL JS性能差异的原因

Question

这个问题适用于了解 MapBox GL JS 内部结构的人。

我正在使用 MapBox GL JS 渲染多达 40,000 个多边形的地理 map ，每个多边形的颜色都基于该多边形的“所有者”。每个所有者通常有许多多边形，并且每个多边形的“所有者”可能会随着时间而改变。所有者的数量可以从 1 到大约 1,000 不等。我遇到了性能问题(这取决于我如何处理它)，所以我尝试了几种不同的策略。

将数据驱动的样式用于“填充颜色”，其中我有一个源和一个层。我已经尝试将多边形 id 和“所有者”id 作为数据驱动样式的类别。

使用过滤层，我有一个单一的来源和每个“所有者”的单独层。同样，我已经尝试将多边形 id 和“所有者”id 作为过滤条件。

为每个“所有者”使用单独的源和层。

选项三的绘图速度最好。当我缩放和平移时，图层渲染得非常快。但是，每当我更改图层的所有者并且 setData 泄漏内存时，我都必须调用 setData，因此最终导致页面崩溃。这个问题，2607，因为不可操作而被关闭，所以我不希望有一个解决方案。

选项一和二在初始缩放时可以绘制，但是当我放大时，它们重新绘制图块的速度非常慢。我一直盯着锯齿状的低细节图块，直到渲染在 20-30 秒后 catch 。请注意，如果我使用“所有者”ID 而不是“多边形”ID，我仍然需要在“所有者”更改时调用 setData，这将导致内存泄漏。如果我使用多边形 id，我只需要在“所有者”更改时更新图层过滤器或填充颜色类别。但是，如果我使用“多边形”ID，我不会得到明显的性能差异，所以我认为没关系。

所以我的问题是为什么当我放大时选项三的渲染速度要快得多？它与分配给绘图的 worker 数量有关吗？在选项一和二中，有一个单一的来源，所以这是否意味着绘图只使用一个 worker ？而在选项三中，每个“所有者”都有一个单独的来源，所以我有多个 worker 在画图？

Answer 1

我建议执行 data-join使用分类数据驱动的样式。这允许您将数据属性更新与几何分离。

退房 https://www.mapbox.com/mapbox-gl-js/example/data-join/有关如何将浏览器中的 JSON 数据连接到矢量切片几何图形的示例。这应该可以很好地扩展到 100 多个功能。