openlayers 15k+ 图像标记性能答案

【问题标题】：openlayers 15k+ image markers performanceopenlayers 15k+ 图像标记性能
【发布时间】：2022-07-14 02:51:18
【问题描述】：

我正在从传单地图迁移到 openlayers。我的地图需要我现在显示大约 12k 标记，这个数量可能会增长到大约 60k（大多数标记都旋转了不同的角度）。

在传单中，经过多次尝试，我实现了这一点。我将leaflet-canvas-markers 与我自己的缓存实现结合起来，所以最后它能够显示 12k 项而没有任何明显的故障（在相对强大的计算机上）。

现在我正在尝试用 openlayers 重新实现它。我看到 Icon 标记和 RegularShape 已经显示在画布上，这很酷，但性能仍然低于要求，这是 codepen 演示（例如，如果您的计算机太快，只需增加到 30k 标记）：

问题是：如何提高显示 15k-60k 标记的性能？

在我自己的实现中，我使用隐藏画布，其中包含所有可能的标记变体，并且旋转变体也被缓存。

因此，当我需要重绘标记时，我只需通过 X 和 Y 从该画布缓存中检索所需的部分并将其复制到地图画布中，这是一个非常快速的操作。

【问题讨论】：

【解决方案1】：

首先，我真的建议您考虑聚类 - 无论如何，地图将更具可读性。

其次，如果大多数人没有从全球世界观开始，您将从使用矢量切片中受益匪浅 - 特别是使用geojson-vt 并最终使用supercluster 进行服务器端集群，这将使您大大减少数量从服务器加载的数据。

【讨论】：

我在 github 问题中找到了一个解决方案：github.com/openlayers/openlayers/issues/13409，现在它可以快速处理大约 70k 个标记。一般来说，拥有全套标记更适合视觉表示，更容易看到小标记的数量而不是阅读数字。当然，我还需要通过缩放来调整标记大小。

【解决方案2】：

您有 2 个选项可供选择。

在 OpenLayers 中使用标记集群： https://openlayers.org/en/latest/examples/cluster.html
使用 WMS 图层而不是来自 GeoServer 等切片服务的标记。在特定的缩放级别，您可以添加选项以通过读取地图范围并使用作为边界框传递的范围调用后端来加载标记

【讨论】：