leaflet - 使用带有 Canvas 渲染传单的自定义图标

标签 leaflet

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

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

最佳答案

嗨,使用这个节点包,
https://www.npmjs.com/package/leaflet-canvas-markers
默认情况下,传单标记作为单独的 DOM 元素添加到我们的 html 页面中,这很难处理这么多的 dom。
但是这个模块使用 html canvas 标签在 map 上绘制标记。
这是我的 10000 个标记的 Canvas 示例,性能很棒,但我没有使用这个包。但我很快就会在我的项目中实现这一点。这次我以其他方式实现了 Canvas 。
演示 -> https://parveen-sishodiya-git.github.io/on-demand-leaflet-markers/

关于leaflet - 使用带有 Canvas 渲染传单的自定义图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45487771/

相关文章:

javascript - 鼠标移动后找到Leaflet.js map 的中心

javascript - 如何导出mapBoxGL map ?

javascript - 将位置插入集合后重新绘制标记和簇

leaflet - 获取传单 map 放大时的标记列表

Javascript:循环遍历保存数组的对象数组

pandas - Python folium GeoJSON map 不显示

javascript - 如何在 react 传单上添加比例?

javascript - 使用Leaflet,如何获取折线弹出坐标并将其添加到弹出内容

maps - 使用传单js库旋转 map

javascript - 如何用javascript减慢这个动画