本文将介绍 cgps-leaflet-canvas-marker，一个可以在 Leaflet 地图上使用 Canvas 替代图片作为 Marker 的 npm 包。通过使用 Canvas 替代图片，可以实现更加灵活和高效的标记点展示，使得地图的渲染速度明显提高，而且可定制性和可扩展性也更加优秀。
安装
使用 npm 进行安装：
npm install cgps-leaflet-canvas-marker --save
使用
在你的项目中引用 cgps-leaflet-canvas-marker：
import CanvasMarker from 'cgps-leaflet-canvas-marker';
正常情况下，我们使用 Leaflet 的 L.Marker 对象来创建标记点。而使用 cgps-leaflet-canvas-marker 则可通过 L.Marker 的子类 L.CanvasMarker 进行创建。
const canvasMarker = new L.CanvasMarker([lat, lng], options); map.addLayer(canvasMarker);
cgps-leaflet-canvas-marker 的 options 参数与 Leaflet 原生的 icon 参数类似，可自定义 Marker 的外观和动画效果。示例代码如下：
-- -------------------- ---- -------
----- ------------ - --- -------------------- ----- -
----- -
------ ---
------- ---
----------- -------- ----- -- -
----- --- - ------------------------
------------- - ------
----------------
------------------ - -- ----------- - -- ---------- - -- -- - - ---------
----------------
-----------
------------- - --------
------------- - ---------
-------- - ----- -------
---------------------- ---------- - -- ----------- - - - ---
--
------------- -------- ----- -- -
----- --- - ------------------------
----- ----- - ---
--- ------ - ----------- - ------ - ----------- - ---
---------------- -- ------------- ---------------
------------- - ------
----------------
------------------ - -- ----------- - -- ---------- - - - -- -- - - ---------
----------------
-----------
------------- - --------
------------- - ---------
-------- - ----- -------
---------------------- ---------- - -- ----------- - - - - - --------
-
-
---
---------------------------上述代码通过 icon 参数中定义的 drawCanvas 和 updateCanvas 函数创建一个带有动画效果的 Canvas 标记点。其中 drawCanvas 函数用于初始化 Canvas 标记点，updateCanvas 函数用于动态更新 Canvas 标记点，可以根据实际需求进行自定义。
总结
使用 cgps-leaflet-canvas-marker 可以使 Leaflet 地图的 Marker 渲染速度大幅提升，并且可以实现更加丰富多样的效果。在实际项目中，推荐尝试使用 cgps-leaflet-canvas-marker 更加灵活的 Canvas Marker。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f3d9381d61a3540e13