浅谈 leaflet 地图插件的使用（制作飞机航线图）

最新推荐文章于 2024-06-21 14:46:06 发布

diaoma4598

最新推荐文章于 2024-06-21 14:46:06 发布

阅读量1.8k

点赞数 1

文章标签：后端

原文链接：http://www.cnblogs.com/hlq-home/p/10644229.html

版权

本文详细介绍了如何利用leaflet地图插件实现飞行航班地图的需求，包括地图交互、自定义图标、marker事件处理、动态航线绘制以及调整飞机图标方向。通过后端返回的实时经纬度数据，实现了航班动态效果和路线跟踪。

摘要由CSDN通过智能技术生成

前沿

接到需求飞行航班地图

需求整理

1.获取后台接口数据，且定时请求数据并渲染，体现航班的动态效果

2.在地图上分布给每组数据设同样的图标

3.给循环的marker设置鼠标事件（移入移出样式设置），点击事件弹窗展示接口返回信息

4.点击某条航班动态绘制航线图。

问题：1.飞机图标要体现路线的方向性，不能用一个icon就表示了。

　　　2.接口返回经纬度实时变化，飞机也在动，要根据飞机运动轨迹绘制路线

具体实现

后端要返回航班起点终点经纬度，根据实施经纬度计算角度，从而调整飞机角度

##绘制基础地图

<!-- 插入到id为mapid的元素 8为地图级别-->
var mymap = L.map('mapid').setView([xxx,xxx], 8),

关注