leaflet canvas

Leaflet Canvas是一个用于在Leaflet地图上绘制海量点的插件。它支持拖拽地图、放大缩小地图、海量点清空和重新标点，而且不会出现卡顿的情况。使用Leaflet Canvas需要进行以下步骤：

1. 安装依赖：通过npm安装leaflet-canvas-marker-xrr2021依赖包。
2. 在Vue页面中引入依赖包：使用import语句引入leaflet-canvas-marker-xrr2021。
3. 初始化PixiJS：在地图初始化之后，需要记录地图的偏移量（即地图的拖动）。通过计算每次移动后的偏移增量，可以得到地图相对于初始化状态的偏移量。然后使用PixiJS创建一个Canvas，并设置其位置为地图的偏移量。最后将Canvas添加到Leaflet的overlay-pane中。
4. 在地图拖动结束后设置Canvas的位置：在每次地图拖动结束后，需要更新Canvas的位置，同时也需要更新其中图片的位置，以保证Canvas起点始终位于屏幕左上角，并且图片与地图元素重合。

以上是关于使用Leaflet Canvas的一些基本步骤。具体的代码实现可以参考相关文档。\[1\]\[2\]\[3\]
#### 引用[.reference_title]
- *1* [vue leaflet地图leaflet-canvas-marker海量点不卡顿，拖拽，缩放地图, 海量点清空，不卡顿](https://blog.csdn.net/weixin_44151993/article/details/117330239)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [【基于Leaflet和Canvas绘图的前端大量栅格数据渲染】](https://blog.csdn.net/CaptainLJP/article/details/125551895)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]