码迷,mamicode.com
首页 > 其他好文 > 详细

leaflet 动态线渲染

时间:2018-08-07 20:45:22      阅读:2252      评论:0      收藏:0      [点我收藏+]

标签:dash   alt   git   ntp   反转   hub   ensp   技术分享   com   

 

可以采用leaflet插件 leaflet-ant-path

 

...
<script src="js/leaflet-ant-path.js" type="text/javascript" charset="utf-8"></script>
...

  //坐标反转,注:antPath为路径数组,坐标格式为[lon,lat]

  //格式示例:var coords=[[-3.65358, -38.71431],[-3.66402, -38.71528],[-3.66861, -38.71573]]

  var coords = [];
  route.forEach(function(e, i) {
    coords.push(e.reverse())
  });

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

//源地址 https://rubenspgcavalcante.github.io/leaflet-ant-path/

效果图如下

技术分享图片

 

L.polyline.antPath参数和方法

 技术分享图片

技术分享图片

leaflet 动态线渲染

标签:dash   alt   git   ntp   反转   hub   ensp   技术分享   com   

原文地址:https://www.cnblogs.com/viczcj/p/9438870.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!