使用 Leaflet 处理数千个标记的最佳实践

Question

我正在结合 Leaflet 使用 HTML 地图进行一些测试。服务器端我有一个 Ruby Sinatra 应用程序，提供由 MySQL 表获取的 json 标记。使用 2k-5k 和可能更多标记的最佳实践是什么？

• 首先加载所有标记，然后将所有内容委托给Leaflet.markercluster.
• 每次地图视口变化时加载标记，将西南和东北点发送到服务器，详细说明裁剪服务器端，然后将标记缓冲区客户端与服务器获取的条目同步（我现在正在做的）。
• 上述两种方法的混合。

Answer 1

自从我最初发布问题以来已经过去了几个月，我已经通过了！

正如@Brett DeWoody 正确指出的那样，right 方法与屏幕上 DOM 元素的数量严格相关（我主要指的是标记）。如果您的设备更快（尤其是 CPU），则越多越好。由于我正在开发的应用程序同时将台式机和平板电脑作为目标设备，因此 CPU 是一个相关因素，就像不同地理区域的标记密度一样。

我决定将 DBase 查询/获取和地图表示/显示分开。基本上，用户调整控件/输入以过滤整个数据集，然后获取记录，Leaflet.markercluster 完成表示工作。当过滤器被修改时，循环重新开始。用户可以根据自己的 CPU 能力选择集群化的地图缩放级别。

在我的特定场景中，上述代表了最佳方法（由 console.time 验证）。我发现视口优化适用于标记密度较低的区域（遗憾）。

Answer 2

在发现问题时尝试选项并进行优化，而不是尽早优化。除非你的标记附有大量数据，否则你可能只使用 Leaflet.markercluster 就可以逃脱。