简介
Leaflet.AnimatedMarker 是一个基于 Leaflet.js 的 npm 包，用于在地图上展示动画效果。通过这个包，我们可以轻松实现在地图上显示移动物体、路径等动态效果。
安装
首先，在项目中安装 leaflet 和 leaflet.animatedmarker：
npm install leaflet leaflet.animatedmarker
然后，在 HTML 文件中引入必要的 CSS 和 JavaScript 文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-cpNf8e27CvJdZnu+laaQwLWYrAaMkDyF9KzE0TlOmmNsGp6xgTJnpGBRBRB2oYhClchHX3q+mjEBNd/LaqPQIg==" crossorigin=""/> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js" integrity="sha512-h4XA5c4dmx4lom1eBwOkSxCkl5VM5H9/kgzVQCscEanmK2G/v6uMeB6qweNo6U+YgKj0pbyi7I9H+miLjs4N0w==" crossorigin=""></script> <script src="./node_modules/leaflet.animatedmarker/src/AnimatedMarker.js"></script>
示例
下面是一个简单的示例代码，演示了如何使用 AnimatedMarker 在地图上显示一条路径，并播放动画效果：
-- -------------------- ---- -------
---- -------- -------------- --------------
--------
-- ------
--- --- - ----------------------------- ------- ----
-- --------
----------------------------------------------------------------- -
------------ ---- ---- ------ -- ------------------------------------------------------- ------------- - -
--- -------------------------------------------------------------------- - -
-------- - -- -------------------------------------------
-------- ---
--------------
-- ------
--- ---- - -
-------- -------
-------- ------
-------- -------
-------- -------
--
-- -- -------------- --
--- -------------- - ---------------------- -
--------- ----- -- ----- ---- -
--------- ---- -- ---- --- --
---
-- - -------------- --------
-----------------------------
-- ----
-----------------------
---------参数说明
AnimatedMarker 的参数包括：
latlngs：必选，路径的点集合，可以是一个数组或者 GeoJSON。options：可选，动画参数，包括以下属性：icon：动画的图标对象。distance：动画的距离（单位：米）。interval：每帧间隔的时间（单位：毫秒）。onEnd：动画结束时触发的回调函数。
结语
通过使用 Leaflet.AnimatedMarker，我们可以轻松实现在地图上展示各种动画效果，为地图增加更多的交互性和视觉效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37395