浅谈 leaflet 地图插件的使用(制作飞机航线图)
前沿
接到需求飞行航班地图
需求整理
1.获取后台接口数据,且定时请求数据并渲染,体现航班的动态效果
2.在地图上分布给每组数据设同样的图标
3.给循环的marker设置鼠标事件(移入移出样式设置),点击事件弹窗展示接口返回信息
4.点击某条航班动态绘制航线图。
问题:1.飞机图标要体现路线的方向性,不能用一个icon就表示了。
2.接口返回经纬度实时变化,飞机也在动,要根据飞机运动轨迹绘制路线
具体实现
后端要返回航班起点终点经纬度,根据实施经纬度计算角度,从而调整飞机角度
##绘制基础地图
<!-- 插入到id为mapid的元素 8为地图级别-->
var mymap = L.map('mapid').setView([xxx,xxx], 8),
地图拖动或缩放调接口
<!-- 地图左上角缩放,拖动调用接口 -->mymap.on('zoomend dragend',function(){mymap.getZoom(); //获取范围经纬度getMap(); //获取接口方法})
marker自定义图标
1.如果自定义几个图标以内,可以自定义地址
var greenIcon = L.icon({iconUrl: 'leaf-green.png', shadowUrl: 'leaf-shadow.png',iconSize: [38, 95], // size of the iconshadowSize: [50, 64], // size of the shadowiconAnchor: [22, 94], // point of the icon which will correspond to marker's locationshadowAnchor: [4, 62], // the same for the shadowpopupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
2.如果是范围内的很多图标,且都一样,如下:
<!-- 循环多个图标,我这里引入了字体图标 -->
var myIcon = L.divIcon({className: 'iconfont icon-99'}),
var res = data //接口返回数据,通过经纬度定位图标位置
$.each(res,function(i){let arr = [];arr.push(res[i].latitude)arr.push(res[i].longitude)var marker = L.marker(arr,{icon: myIcon}).addTo(mymap);
})
3.如果要给marker 添加事件
marker.on('click',function(e){//function
}).on('mouseover',function(){//鼠标移入设置自定义样式 hovColor及文本marker.setIcon(L.divIcon({className: 'iconfont icon-99 hovColor',html:'<span class="tag">'+res[i].flight+'</span>'}))
}).on('mouseout',function(){marker.setIcon(L.divIcon({className: 'iconfont icon-99'}))
})
4.marker获取数据重新渲染
重新渲染需要先清除原标记再添加,且每一个marker都要重新渲染,需要使用LayerGroup组先存放marker
var myLayerGroup = new L.LayerGroup();
myLayerGroup.clearLayers(); //循环marker赋值前先清除清除marker标记组,便于重绘<!-- marker 循环赋值后-->
myLayerGroup.addLayer(marker);
mymap.addLayer(myLayerGroup);
绘制路线
当点击某个航班时,需要接口返回该航班历史经纬度数组,且实时返回,这时可以新建个数组变量latlngs,实时push数组给他,每一次push后重绘路线,看上去就像路线跟着飞机后面动
L.polyline(latlngs, {color: 'red',opacity:'0.8',weight:'1'}).addTo(mymap);
调整飞机方向
后台根据实时位置计算某个航班的飞机角度返回,前台拿到角度设置icon样式,难点在后台
转载于:https://www.cnblogs.com/hlq-home/p/10644229.html
浅谈 leaflet 地图插件的使用(制作飞机航线图)相关推荐
- 浅谈导航电子地图的组成和制作流程
这是四维公司在周四的时候做的一个小小的活动(由于一直有点忙,所以今天才整理此篇文章),主要是讨论行人导航地图的应用与发展.由于我们经理比较忙,所以就让我过去看看.这次活动在蓝色港湾酒吧一条街的全明星运 ...
- 浅谈百度地图的简单开发之实现地图全景,内景展示功能(四)
今天,我就接着来浅谈一下关于百度地图的内景,外景的展示功能.今天具体要实现的功能就是输入该地点的名称然后就展示该地点的内景图片,有内景就展示内景,没有则显示该地点的街景,该功能是参考百度地图官方的AP ...
- 浅谈k8s cni 插件
目前不论是个人还是企业,在使用k8s时,都会采用CNI作为集群网络方案实现的规范. 在早先的k8s版本中,kubelet代码里提供了networkPlugin,networkPlugin是一组接口,实 ...
- leaflet地图插件汇总
参考博文 https://leafletjs.com/reference-1.7.1.html leaflet地图文档 https://blog.csdn.net/bigbear00007/artic ...
- vue搭配echarts做地图散点效果以及飞机迁徙图
记录一下自己vue项目中做的echarts地图分布散点效果 1.项目安装echarts 在已经生成的vue项目根目录运行安装echarts: npm install echarts -S 2.百度地图 ...
- 浅谈百度地图的简单开发之结合方向传感器实现定位功能(三)
今天我们来谈下百度地图的定位功能,在此之前我已经将百度地图的基本地图大概说了下,其实百度地图的基本功能还有很多的内容.感兴趣的可以到百度地图的开发者的官网看看.今天就开始来讲下百度地图中的定位功能. ...
- 浅谈 Kubernetes Scheduling-Framework 插件的实现
最近几个月一直在研究 kubernetes 的 scheduling-framework 调度框架,发现还是十分有意思的,我自己也实现了一个基于 scheduling-framework 调度框架的自 ...
- 关于计算机的多媒体论文题目,浅谈计算机多媒体电子相册设计与制作(毕业论文)...
内容介绍 原文档由会员 陈海峰 发布 ****信息大学 毕业论文 课 题: 电子相册设计与制作 专 业 计算机多媒体技术 学生姓名 班 组 学 号 指导教师 完成日期 摘要:在当今社会电子相册影像已成 ...
- 浅谈百度地图的简单开发再续前缘之公交,地铁路线检索查询(六)
关于百度地图的简单开发前段时间,写过一个小系列的博客关于百度地图的基本地图,定位,全景,导航等功能做了简单的介绍.从今天开始又将准备一期有关百度地图的POI检索的等一列查询功能,如城市检索,周边检索, ...
最新文章
- 谷歌推出新模型「pQRNN」,少量参数下进行文本分类,性能堪比BERT
- 文巾解题 01.05. 一次编辑
- C语言实现折半插入排序(Binary Insertion Sort)算法(附完整源码)
- 方舟编译器服务器端Java怎么用_方舟编译器可以运行Hello World了!
- 数学特级老师:数学除了做习题,这份140G的资料一定要收藏!
- map容器中删除一个元素(value)
- android获取手机的IMSI码
- ARMLINUX学习笔记(6)------启动代码分析
- apache ab 压测
- 终端服务器超出最大允许连接数
- matlab积分作图速度慢,MATLAB 多个积分和画图的问题,一直画不出来。
- 《实用机器学习》中的一些拓展问题
- mysql_视图与变量
- Phase2 Day10 Tree3Set
- binder机制原理android,Binder机制1---Binder原理介绍
- 为什么越来越多的人选择FUP T10S系列超声波探伤仪
- 产品经理进修第六天 产品经理面试
- gofpdf 学习笔记
- 毕业设计-基于深度学习的视频目标检测
- 翻译-现代浏览器的架构与发展