在LeafletJS中绘制140K点 [英] Plotting 140K points in leafletjs

问题描述

我是Leafletjs的新手.在cesiumjs上工作了一段时间，我们现在正在尝试制作传单.切换的主要原因是查看性能是否存在巨大差异.

I'm new to leafletjs. Been working on cesiumjs for a while and we are trying leaflet now. The main reason for the switch is to see if there's a huge performance difference.

在铯中，我绘制了一些原始点.在letletletjs中绘制140K点的最有效方法是什么?使用标记还是创建单个小圆圈?

In Cesium, I had a collection of primitive points that I plotted. What's the most efficient way of plotting 140K points in leafletjs? Using markers or creating individual little circles?

我也正在考虑使用集群插件(

I am also thinking of using the clustering plugin (http://leafletjs.com/2012/08/20/guest-post-markerclusterer-0-1-released.html), so please share any thoughts on performance.

推荐答案

您有2个常用选项:

• 在基于Canvas的图层中显示点，例如使用圆形标记并强制 Leaflet MaskCanvas插件 ).圆形标记(即使在画布上)仍会发出事件，因此您可以检测到"click"等.

• Display your points in a Canvas-based layer, like using Circle Markers and force rendering them on a Canvas instead of SVG (see also Leaflet MaskCanvas plugin). Circle Markers, even on a canvas, still emit events, so you can detect "click" etc.

使用集群插件，例如 https: //github.com/Leaflet/Leaflet.markercluster#handling-lots-of-markers 和演示

Use a clustering plugin, like Leaflet.markercluster plugin that you mention for exampe. It can handle your 140k points, depending on the client's computer performance (see https://github.com/Leaflet/Leaflet.markercluster#handling-lots-of-markers and demo http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.50000.html with 50k points, but note that the demo uses an old version of the plugin, whereas the current version is even faster).

尝试在没有Canvas或群集的情况下显示140k点肯定会导致浏览器崩溃.

Trying to display your 140k points without Canvas or clustering will crash your browser for sure.

这篇关于在LeafletJS中绘制140K点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！