leaflet 动态线渲染
2024-08-28 03:55:27
可以采用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参数和方法
最新文章
- 未能添加对***.dll的引用问题
- Xceed Ultimate Suite Xceed界面控件套包下载
- PostgreSQL Replication之第十二章 与Postgres-XC一起工作(7)
- hdu 5025 Saving Tang Monk 状态压缩dp+广搜
- Log4net 写文件日志与数据库日志
- WebLogic Server的单点登陆功能--转载
- SQL中varchar和nvarchar有什么区别?
- Gitolite v3安装配置指南
- crawler_微信采集方案
- spring boot 事件发布与接收
- 返回 字符串的 form和js组合让页面跳转
- Android--UI之ScrollView
- .Net程序员学用Oracle系列(14):子查询、集合查询
- Unsupervised pre-training
- PAT A1122 Hamiltonian Cycle (25 分)——图遍历
- 数据库简单练习 建表+select
- WPF图片模糊的解决之路
- TP5 通过shell建立PHP守护程序
- shell chmod中数字与字母的含义
- iOS审核拒绝苹果官方原因详解