leaflet动态路线

北寂.

已于 2022-01-22 16:20:32 修改

阅读量1.4k

点赞数

文章标签： css3 html5 css

于 2022-01-22 16:10:31 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45059900/article/details/122639025

版权

本文展示了如何利用Leaflet的Ant Path插件创建动态路线，通过npm安装插件并进行导入，实现地图上路线的动画效果。

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

官方实例：Leaflet Ant Path Example

以下为两个动态路线实例：

下载插件：npm install leaflet-ant-path

import引入

//清除上一次画的线段
if (gPath) {
                gMap.removeLayer(gPath);
            }
var longLatList =[[****,****],[*****,****]];//经纬度数组
                        var antPath = L.polyline.antPath;
                        gPath = antPath(longLatList, {
                            "paused": false,   　　//暂停  初始化状态
                            "reverse": false,　　//方向反转
                            "delay": 3000,　　　　//延迟，数值越大效果越缓慢
                            "dashArray": [10, 20],　//间隔样式
                            "weight": 3,　　　　//线宽
                            "opacity": 0.5,　　//透明度
                            //"color": "#0000FF",　//颜色