Leaflet中使用Leaflet.AnimatedMarker插件实现要素轨迹移动
场景
Leaflet快速入门与加载OSM显示地图:
Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图
在上面的基础上怎样实现要素轨迹移动效果。
插件地址:
GitHub - openplans/Leaflet.AnimatedMarker: A Leaflet plugin to animated a Marker along a polyline
注:
博客:
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、下载插件并引入依赖
<script type="text/javascript" src="./js/AnimatedMarker.js"></script>
2、添加自定义图标和轨迹数据组,这里是两条轨迹路线
//添加自定义图标var bikeIcon = L.icon({//图标地址iconUrl: './images/marker-bike-green-shadowed.png',//图标大小iconSize: [25, 39]});//轨迹线数组var routeLines = [L.polyline([[36.09, 120.35], [36.10, 120.36], [36.11, 120.37]]),L.polyline([[36.05, 120.33], [36.04, 120.32], [36.03, 120.31]]),];
3、设置定时器,模拟轨迹移动
/**开始轨迹移动*/setInterval(function () {//标注集合var markers = [];//添加轨迹移动标注$.each(routeLines, function (i, routeLine) {var marker = L.animatedMarker(routeLine.getLatLngs(), {//设置标注图标icon: bikeIcon,//开启移动状态autoStart: false,onEnd: function() {// TODO: blow up this marker//移动结束后移除map.removeLayer(this);}});//在新位置添加标注map.addLayer(marker);markers.push(marker);});for (var i = 0; i < markers.length; i++) {//调用start方法,开始移动markers[i].start();}}, 5000);
4、完整示例代码
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>leaflet要素轨迹移动</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style>
</head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript" src="./js/AnimatedMarker.js"></script><script type="text/javascript" src="./js/jquery/jquery-1.11.2.min.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);//添加自定义图标var bikeIcon = L.icon({//图标地址iconUrl: './images/marker-bike-green-shadowed.png',//图标大小iconSize: [25, 39]});//轨迹线数组var routeLines = [L.polyline([[36.09, 120.35], [36.10, 120.36], [36.11, 120.37]]),L.polyline([[36.05, 120.33], [36.04, 120.32], [36.03, 120.31]]),];/**开始轨迹移动*/setInterval(function () {//标注集合var markers = [];//添加轨迹移动标注$.each(routeLines, function (i, routeLine) {var marker = L.animatedMarker(routeLine.getLatLngs(), {//设置标注图标icon: bikeIcon,//开启移动状态autoStart: false,onEnd: function() {// TODO: blow up this marker//移动结束后移除map.removeLayer(this);}});//在新位置添加标注map.addLayer(marker);markers.push(marker);});for (var i = 0; i < markers.length; i++) {//调用start方法,开始移动markers[i].start();}}, 5000);</script>
</body></html>
Leaflet中使用Leaflet.AnimatedMarker插件实现要素轨迹移动相关推荐
- Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
- Leaflet中使用Leaflet.Path.Transform插件实现旋转图形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
- Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 前面所引用的 ...
- Leaflet中使用Leaflet.Polyline.SnakeAnim插件实现水流模拟效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图 在上面的基础上怎样实现水流模拟效果. 水流模 ...
- Leaflet中使用Leaflet.Graticule插件实现添加矩形格网
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面加载地 ...
- Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样使用Leaflet.co ...
- Leaflet中使用Leaflet.fullscreen插件实现全屏效果
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样实现地图全屏效果. ...
- Leaflet中使用leaflet.polylineDecorator插件绘制箭头线及虚线矩形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
- Leaflet中使用leaflet.easyPrint插件实现打印效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
最新文章
- R语言readLines函数、n.readLines函数、readline函数读取文本文件实战
- 话说Ubuntu和FreeBSD将要合成一个新的版本:UbuntuBSD
- Enterprise Library 2.0 技巧(3):记录ASP.NET站点中未处理的异常
- c语言file_C语言 技能提升 系列文章(七)格式化输入/输出
- php的内存分配还是很智能的
- redis-server.exe redis.windows.conf 报错
- bzoj 4551: [Tjoi2016Heoi2016]树【并查集】
- 通俗易懂讲解RPC、SpringCloud、Dubbo、Zookeeper、Hadoop、hive等概念的区别
- Docker + Jenkins 快速打造 PHP 持续集成服务器
- sklearn常用函数(更新中)
- Redis 3.2.x版本 redis.conf 的配置文件参数详解
- python变量、运算符、要求从键盘输入用户名和密码,校验格式是否符合规则,如果不符合,打印出不符合的原因,并提示重新输入练习
- 凯撒密码中有数字怎么办_古典密码
- HTML5-打字游戏
- CAD2019安装方法及步骤
- 使用38译码器扩展单片机接口
- stc c语言子程序库,STC15 系列宏晶单片机的样例程序 - 下载 - 搜珍网
- 网站监控服务都包括哪些具体内容?
- 小程序实现文字竖排展示
- win10下ant下载安装配置记录
热门文章
- Spring Cloud Alibaba:Sentinel 热点参数限流
- python大一考试_python 考试补缺
- 国际化在zuul中实现
- centos 6.5 32bit qemu 环境搭建
- kylin安装mysql_源码安装mysql
- 计算机基础与应用课程小结,计算机应用基础课程小结.docx
- java环境的意义_java环境变量配置的意义
- 新媒体学python有用吗_你真的不学Python吗?学习Python的四大理由!
- 指数衰减学习率的意义与使用方法
- logic多分类的两种类别