浅谈 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 icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-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样式，难点在后台