使用Leaflet处理数千个标记的最佳实践 [英] Best practices for handling thousands of markers with 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 .
• 每次地图视口更改时都加载标记，并发送southwest& northEast指向服务器，详细说明裁剪服务器端，然后将标记缓冲区客户端端与服务器获取的条目同步(我现在正在做的事情).
• 以上两种方法的混合.

谢谢， 卢卡

推荐答案

自我最初发布问题并成功解决以来，已经过去了几个月！

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

正如@Brett DeWoody正确指出的那样， right 方法必须与屏幕上的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屋！