淺談 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樣式，難點在後臺