Leaflet 创建一条线（画的效果）

最新推荐文章于 2025-09-26 07:00:00 发布

原创最新推荐文章于 2025-09-26 07:00:00 发布 · 711 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

Leaflet 专栏收录该内容

3 篇文章

订阅专栏

文章描述了如何使用JavaScript和Leaflet库在地图上通过给定的坐标数据创建一个动态的粉红色线路，通过`L.polyline`函数添加点并定时更新路径。


  const data= [
        [36.69224227956309, 110.92799511728634],
        [36.69197501476073, 110.9304389005796],
        [36.69086635084643, 110.93018588261238],
        [36.69122270884789, 110.92786552271781],
        [36.69224227956309, 110.92799511728634],
      ];  
   
 var polyline = L.polyline(data, { color: 'pink', weight: 10}).addTo(map);
      var i = 0;
      function animate() {
        if (i < data.length) {
          polyline.addLatLng(data[i]);
          i++;
          setTimeout(animate, 10000); // 设置刷新速度，单位为毫秒
        }
      }
      animate();