Leaflet 传单中标记或点的大型数据集

我想在传单地图上渲染大约10000个标记或点。我已经用常规方法做了，我发现它比谷歌地图慢多了。我正在寻找一种在不出现性能问题的情况下渲染多个元素的方法

有没有办法用传单做到这一点

---

更新：我不想用无法处理事件的亮点来绘图。我希望实际使用不同的颜色和事件绘制标记。

性能问题是由于每个标记都是一个单独的DOM元素。浏览器在渲染成千上万的图像时遇到了困难

在您的情况下，一个简单的解决方法是使用它们并在画布上进行渲染（例如，使用贴图选项，或使用您传递给每个圆标记的特定选项）。这就是谷歌地图默认的工作方式：它的标记实际上是在画布上绘制的

var map=L.map（'map'{
真的吗
});
var circleMarker=L.circleMarker（latLng{
颜色：“#3388ff”
}).addTo（地图）；

或

var-map=L.map（'map'）；
var myRenderer=L.canvas（{padding:0.5}）；
var circleMarker=L.circleMarker（latLng{
渲染器：myRenderer，
颜色：“#3388ff”
}).addTo（地图）；

使用此解决方案，每个圆标记不再是一个单独的DOM元素，而是由传单绘制到单个画布上，这对于浏览器来说更容易处理

此外，传单仍然跟踪鼠标位置和相关事件，并触发圆圈标记上的相应事件，以便您仍然可以收听此类事件（如鼠标单击等）

10万分的演示：

你应该检查一下。它提供了使用web gl渲染传单点和多边形的方法，允许更轻松地进行缩放

使用R制作传单的人也可以使用：

---

R版本非常简单。

我使用官方传单插件PixiOverlay获得了很好的效果。

---

[2019]

也许有点晚了，但佩德罗·维森特的答案似乎是最好的选择。glify（.）很好，但除了在地图上创建点、形状和线之外，您没有其他选择。（还没有定制。）PixiOverlay使用本机/自定义标记。它也有很好的可视化（动画，缩放等），它也在IE11中工作。对我来说，如果你要处理成吨的马克笔，这是必须的。去试试看

---

p.S Glify和PixiOverlay都在使用WebGL，因此用户计算机上的性能会有所不同

你可以查看标记聚类，它可以聚类你的地图，直到你放大细节。我目前正在加载房地产信息，它似乎解决了超过300000个贷款的问题

---

可能的重复我实际上想画具有不同特征的点或标记。颜色，形状。。。等等。不仅仅是创建一个覆盖。你可以尝试在一个平面上使用圆圈标记（你可以调整它们的颜色），圆圈标记比普通标记快吗？是否可以更改140K点的颜色？我在询问之前就实现了它，但是我不能改变点的颜色。如果你使用画布，是的，它会更快。对于颜色，实例化时只是一个选项问题。是否可以将锚添加到圆标记或在画布中显示任何自定义SVG？@LASkuma我不确定我是否完全理解您的问题，特别是关于锚的问题。至于,就是。应该有一些提供的方法来使用花式图标，例如。请随意打开一个新问题，详细描述您的问题。稍微解决了一点问题，但放大和缩小后问题就悬而未决了。有什么解决办法吗？@GauravPaliwal请随时提出您自己的问题，详细说明您的具体问题和复制代码。我不确定这一点，因为L.glify有完全不同的API而不是传单。因此，更合乎逻辑的做法是切换到另一个基于webGl的生产准备MAPI在我看来，不同的API是一件好事，因为您不必为每个点创建新对象；可以在阵列中添加一组点。