实时记录运动轨迹插件_浅谈 leaflet 地图插件的使用（制作飞机航线图）

前沿

接到需求飞行航班地图

需求整理

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

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

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

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

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

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

具体实现

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

##绘制基础地图

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 icon

shadowSize: [50, 64], // size of the shadow

iconAnchor: [22