使用 Leaflet 处理数千个标记的最佳实践 [英] Best practices for handling thousands of markers with Leaflet

问题描述

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

I'm doing some tests with an HTML map in conjunction with Leaflet. Server side I have a Ruby Sinatra app serving json markers fetched by a MySQL table. What are the best practices working with 2k-5k and potentially more markers?

• 首先加载所有标记，然后将所有内容委托给 Leaflet.markercluster.
• 每次地图视口改变时加载标记，发送西南和NorthEast 指向服务器，详细说明剪辑服务器端，然后将标记缓冲区客户端与服务器获取的条目同步(我现在正在做的事情).
• 上述两种方法的混合.

谢谢，卢卡

推荐答案

距离我最初发布问题已经过去几个月了，我通过了！

Few months has passed since I originally posted the question and I made it through!

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

As @Brett DeWoody correctly noted the right approach is to be strictly related to the number od DOM elements on the screen (I'm referring mainly to markers). The more the merrier if you device is faster (CPU especially). Since the app I was developing has both desktop and tablet as target devices, CPU was a relevant factor just like the marker-density of different geo-areas.

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

I decided to separate DBase querying/fetching and map representation/displaying. Basically the user adjusts controls/inputs to filter the whole dataset, afterwards records are fetched and Leaflet.markercluster does the job of representation. When a filter is modified the cycle starts over. User can choose the map zoom level of clusterization depending on their CPU power.

在我的特定场景中，上面提到的代表了最好的方法(由 console.time 验证).我发现视口优化适用于标记密度较低的区域(可惜).

In my particular scenario the above mentioned represented the best approach (verified by console.time). I found that viewport optimisation was good for lower marker-density areas (a pity).

希望对您有所帮助.

干杯，卢卡

这篇关于使用 Leaflet 处理数千个标记的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！