jas*_*per 6 mapbox-gl mapbox-gl-js
这个问题适用于了解MapBox GL JS内部的人.
我正在使用MapBox GL JS渲染最多40,000个多边形的地理地图,每个多边形都根据该多边形的"所有者"进行着色.每个所有者通常有许多多边形,每个多边形的"所有者"可能会随时间而变化.拥有者的数量可以从一个到大约1,000个不等.我遇到了性能问题(根据我的处理方式而有所不同),所以我尝试了一些不同的策略.
选项三具有最佳的绘图速度.在缩放和平移时,图层渲染速度非常快.但是每当我更改图层的所有者并且setData泄漏内存时我都必须调用setData,这样我最终会崩溃.这个问题,2607,已被关闭,因为无法采取行动,所以我不希望得到解决方案.
选项一和二可以使用初始缩放进行绘制,但是当我放大时,它们很难重新绘制平铺.我被困在看着锯齿状的低细节瓷砖,直到渲染在20-30秒后赶上.请注意,如果我使用"owner"id而不是"polygon"id,我仍然需要在"owner"更改时调用setData,这将导致内存泄漏.如果我使用多边形id,我只需要在"所有者"更改时更新图层过滤器或填充颜色类别.但是,如果我使用"polygon"id,我没有明显的性能差异,所以我认为没关系.
所以我的问题是为什么当我放大时选项三的渲染速度要快得多？是否与分配给绘图的工人数量有关？在选项一和二中,有一个单一的来源,这是否意味着绘图只使用一个工人？在选项三中,每个"所有者"都有一个单独的来源,所以我有多个工人在做绘图？
小智 6
我建议执行data-join使用分类数据驱动样式。这允许您将数据属性更新与几何图形分离。
查看https://www.mapbox.com/mapbox-gl-js/example/data-join/，了解如何在浏览器中将 JSON 数据连接到矢量切片几何图形的示例。这应该可以很好地扩展到 100 多个功能。
我认为您将需要多种技术来解决本质上的细节级别 (LOD) 问题。我做过类似的工作，涉及绘制一个国家的多边形区域来指示一个州内的各个区域，并且您必须缩放数据以适应视图。
我建议的第一件事是为您的区域创建不同级别的详细信息。通过删除与其相邻点在直线几度范围内对齐（从地理上讲）的区域顶点，可以自动完成首次扫描。将此视为删除许多小点，这些小点不会向区域边界添加细节，因为它们位于直线上。由于这可以是一个自动化（甚至是预存储）步骤，因此您可以根据缩放级别创建不同级别的细节。
第二个建议是视图空间剔除。也就是说，如果某个区域不在视口内，则不要渲染它！如果您尝试做到这一点完美，您最终会遇到与以前相同的 CPU 问题，因此我建议创建一个区域边界框（如果您仅使用轴对齐查看，则提出建议，因为它是最简单的）解决方案）。
如果您需要非轴对齐区域，只需创建一个边界圆（其半径基于距该区域地心最远的边界顶点）。
我建议你的各种困难都是场景复杂性问题的衍生物。解决这个问题，您将拥有一个更加高效的系统。
祝你好运！
| 归档时间： |
|
| 查看次数： |
1767 次 |
| 最近记录： |