当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Leaflet实现动态线路

Leaflet实现动态线路

2019年01月26日  | 移动技术网IT编程  | 我要评论

一、引用leaflet脚本样式，和leaflet ant path 插件

下载地址：

leaflet：

leaflet ant path：

使用leaflet ant path 插件要求leaflet的版本大于等于1.0

<link href="~/scripts/leafletjs/1.4.0/leaflet.css" rel="stylesheet" />
<script src="~/scripts/leafletjs/1.4.0/leaflet.js"></script>
<script src="~/scripts/leafletjs/1.4.0/leaflet-ant-path.js"></script>

 

二、地图初始化

 /**
       * 地图初始化
       */
        function mapinit() {
            var amapnormalurl = '/api/map/getmap?type=783085212&zoom={z}&x={x}&y={y}';
            var amapnormallayer = new l.tilelayer(amapnormalurl, {
                minzoom: 1,
                maxzoom: 18,
                attribution: ''
            });

            var mapcenter = new l.latlng(****，****);
            gmap = new l.map('mapcontainer', {
                center: mapcenter,
                zoom: 16,
                minzoom: 1,
                maxzoom: 18,
                layers: [amapnormallayer]
            });
        }

三、画动态线段

//清楚上一次画的线段
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",　//颜色
                            //"pulsecolor": "#ffffff"　　//块颜色
                        });
                        gpath.addto(gmap); 

                        // 缩放地图到折线所在区域
                        gmap.fitbounds(gpath.getbounds());

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网