zoukankan      html  css  js  c++  java
  • leaflet 动态线渲染

    可以采用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参数和方法

     

  • 相关阅读:
    好的Qt学习资料
    QT QMap介绍与使用
    Qt缺少调试器
    vs2012+Qt5.3.1环境添加新的ui界面的方法
    QT定时器的使用
    Qt中forward declaration of struct Ui::xxx的解决
    linux-svn命令
    如何编写Windows服务
    为你的爬虫提提速?
    Python爬虫的N种姿势
  • 原文地址:https://www.cnblogs.com/vichang/p/9438870.html
Copyright © 2011-2022 走看看