leaflet实现流动线(动态线)效果

一、引入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
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值