Leaflet 创建一个运动轨迹

原创于 2023-08-11 15:04:33 发布 · 842 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Leaflet 专栏收录该内容

3 篇文章

订阅专栏

文章介绍了如何在JavaScript项目中通过npm安装leaflet.markercluster插件，并展示了一个实例，使用自定义图标创建动态标记，标记按照预设轨迹在地图上移动后自动移除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. npm i leaflet.markercluster --save 安装这个插件

const data = [
    [36.69224227956309, 110.92799511728634],
    [36.69224227956309, 111.92799511728634],
] 
const peopleIcon = L.icon({
        iconUrl: popleIcon, // 替换为你自己的标记图标路径 './image/img.png'
        iconSize: [25, 41],  //图片大小
        iconAnchor:[25,70]  //图片位置
 })
 setInterval(() => {
        var marker = L.animatedMarker(data, {
        autoStart: true,
        distance: 100, // 运动轨迹的总距离，单位为像素
        interval: 1000, // 每帧之间的时间间隔，单位为毫秒
        icon: peopleIcon ,
        onEnd: function () {
          //移动结束后移除
          map.removeLayer(this);
        }
      }).addTo(map);
}, 2000)