leaflet实现流动线（动态线）效果

最新推荐文章于 2024-05-18 16:20:56 发布

挑柚子小能手

最新推荐文章于 2024-05-18 16:20:56 发布

阅读量4.4k

点赞数 1

本文链接：https://blog.csdn.net/t1234tgb/article/details/109250566

版权

一、引入leaflet脚本和leaflet-and-path插件

Leaflet：https://leafletjs.com/download.html

Leaflet Ant Path：https://github.com/rubenspgcavalcante/leaflet-ant-path

使用Leaflet Ant Path 插件要求Leaflet的版本大于等于1.0

ps：网上找了很久，基本都是用的这个Leaflet Ant Path下载地址，但是install的时候有报错，无奈没找到其他资源，只好硬着头皮改。。。

现记录运行成功的方法：
1.下载github里的Leaflet Ant Path到本地（我用的vscode），此时直接在终端运行npm install leaflet-ant-path会报错，需更改package.json中的"name"，只要不是leaflet-ant-path就行，随意~
改完之后npm install leaflet-ant-path
如果出现npm notice created a lockfile as package-lock.json. You should commit this file.这样的提示，别急哦，还是package.json，在最后加上"private": true就行啦~
2.npm install --save leaflet-ant-path
3.npm run build
虽然此时会报“‘NODE_ENV’ 不是内部或外部命令，也不是可运行的程序”，但是刷新目录，依然会出现一个dist文件夹，拷贝到自己的项目中就行哦~

二、附上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Leaflet 加载</title>
    <link rel="stylesheet" href="../leaflet/leaflet.css">
    <style>
        html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        </style>
</head>
<body>
<div id="map"></div>
<script src="../leaflet/leaflet.js"></script>
<script src="../leaflet/dist/leaflet-ant-path.js"></script>

<script>
    var url = "http://173.80.4.334:3333/{z}/{x}/{y}.png";
    //z表示地图的缩放级别
    //x表示地图瓦片的横向坐标
    //y表示地图瓦片的纵向坐标
    //其中的路径就是保存地图瓦片的的路径
    var tilemap = new L.TileLayer(url);
    //加载地图的底层对象
    var mapcenter = new L.latLng(39.5,116.89);
    //地图的中心点的对象
    //创建一个地图对象Map，将地图瓦片等对象添加进这个对象：

    var map = new L.Map("map", {    //"map"为需要插入地图的div的id
                CRS:'Simple',   //离线地图加载规则
                center:mapcenter,   //地图中心点
                zoom: 7,           //默认展示的缩放级别
                layers: [tilemap],  //插入的地图的图层
                minZoom: 0,         //最小缩放级别
                maxZoom: 11,        //最大缩放级别
                opacity: 0.1,       //图层的不透明度
            });

            var _viewSpotLayer=new L.featureGroup([]);
            map.addLayer(_viewSpotLayer);
            var pointFeature = new L.marker([39.905,116.399]).addTo(_viewSpotLayer);


            var lineArr=[[39.920969009399414, 116.38572692871094],[40.91101264953613,116.6862419128418],[41.91161346435547, 117.39636993408203],[42.9217414855957,117.5057691192627],[43.9213981628418, 116.99589859008789]];
            var line =new L.polyline(lineArr,{color:'red',opacity:'0.8',weight:'3'}).addTo(_viewSpotLayer);

            var longLatList =[[9.920969009399414, 116.38572692871094],[40.91101264953613,116.6862419128418]];//经纬度数组
                        var antPath = L.polyline.antPath;
                        gPath = antPath(longLatList, {
                            "paused": false,   　　//暂停  初始化状态
                            "reverse": false,　　//方向反转
                            "delay": 3000,　　　　//延迟，数值越大效果越缓慢
                            "dashArray": [10, 20],　//间隔样式
                            "weight": 3,　　　　//线宽
                            "opacity": 0.5,　　//透明度
                            //"color": "#0000FF",　//颜色
                            //"pulseColor": "#FFFFFF"　　//块颜色
                        });
                        gPath.addTo(_viewSpotLayer); 

    
</script>
</body>
</html>

挑柚子小能手

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
leaflet实现流动线（动态线）效果

一、引入leaflet脚本和leaflet-and-path插件Leaflet：https://leafletjs.com/download.htmlLeaflet Ant Path：https://github.com/rubenspgcavalcante/leaflet-ant-path使用Leaflet Ant Path 插件要求Leaflet的版本大于等于1.0ps：网上找了很久，基本都是用的这个Leaflet Ant Path下载地址，但是install的时候有报错，无奈没找到其他资源，只
复制链接

扫一扫