使用带有画布渲染传单的自定义图标

时间:2017-08-03 14:53:24

标签: leaflet

我需要在带有自定义图标的传单地图上绘制数千个点。当我得到大约1500个标记时,使用标准L.marker的性能太慢而无法使用。我尝试使用L.circleMarker解决方案here,并且我能够以出色的性能绘制数千个点。不幸的是,使用L.circleMarker我只能制作不同类型的圆圈,这不符合我的要求。我也无法利用群集,因为没有一种特别好的方法可以用不同的图标聚类这些不相关的标记。

有没有办法在使用自定义图标的同时获得画布渲染的性能优势?

5 个答案:

答案 0 :(得分:0)

在花了几个小时研究之后,我得出的结论是,传单不能用画布创建自定义图标。

虽然有一个名为leaflet-canvasicon的插件,但它增加了功能。

我还没有测试过,但这个例子看起来还不错。

https://github.com/sashakavun/leaflet-canvasicon

答案 1 :(得分:0)

我能够使用CircleMarkers和MarkerCluster,但必须创建一个自定义的CircleMarker类,如下所示:https://github.com/Leaflet/Leaflet/issues/6257

答案 2 :(得分:0)

我制作了一个插件来在画布上渲染标记:https://github.com/francoisromain/leaflet-markers-canvas

您可以将其与自定义标记一起使用。

答案 3 :(得分:0)

嗨,使用这个节点包, https://www.npmjs.com/package/leaflet-canvas-markers

默认情况下,传单标记作为单独的 DOM 元素添加到我们的 html 页面中,这很难处理这么多的 DOM。

但是这个模块使用 html canvas 标签在地图上绘制标记。

这是我的 10000 个标记的画布示例,性能很棒,但我没有使用这个包。但我很快就会在我的项目中实现这一点。这次我以其他方式实现了画布。

演示 -> https://parveen-sishodiya-git.github.io/on-demand-leaflet-markers/

答案 4 :(得分:-1)

您可以使用https://www.npmjs.com/package/leaflet-canvas-markers 将所有图像添加到一个画布中。您只需指向上一个航路点就可以创建方向箭头!