OpenLayers学习笔记（十一）— 飞机速度矢量线预测

 

在机场使用的空管系统中，飞机的速度矢量线差不多是这样的：

 

 

模拟飞机飞行时的速度矢量线，这里就大概做个类似效果：

什么叫速度矢量线呢，个人理解就是根据飞机当前速度和航向预测它在未来一段时间内的飞机轨迹，以此来监测飞机是否偏离。

如何运行代码已经在上一篇博客《动态加载JSON数据模拟航迹线》讲过了。

在这个模拟DEMO中，主要存在四个图层，分别为地图底图、航迹线图层、速度矢量线图层、飞机图层（我用的点代替飞机图标），因为我自身有一个需求就是控制航迹和速度矢量线的显示与隐藏，这跟本文没多大关系。

技术准备

常规的数学公式都知道，路程 = 速度 * 时间，在地图上的一些相关计算，查阅了一些资料，并翻译了相关的计算博文《(译)计算距离、方位以及更多经纬度之间的点》，并Google到了一个相关的技术博客，只不过这是基于OL 2的一些例子，但是我从中得到了一些灵感。

1.实现

在上一篇博文的代码基础上添加，相关都做了详细注释

2.图层以及样式

 /**
         * @name: 相关样式和图层：点 航迹线 飞机  标牌
         * @test: test font
         * @msg: 
         * @param {type} 
         * @return: 
         */
        //样式
        let point_style = new ol.style.Style({//预测点
            image:new ol.style.Circle({
                radius:2,
                snapToPixel:false,
                fill:new ol.style.Fill({
                    color:'#333'
                }),
                stroke:new ol.style.Stroke({
                    color:"#333",
                })
            })
        })
        let route_style = new ol.style.Style({//航迹线
            stroke:new ol.style.Stroke({
                width:2,
                color: 'yellow'
            }),
            zIndex:2
        });
        let vel_style = new ol.style.Style({//速度矢量线
            stroke:new ol.style.Stroke({ 
                color: '#333',
                width: 1,
            })
        });
        //创建轨迹线
        let trackLine = new ol.geom.LineString([]); 
        //速度矢量线
        let velLine = new ol.geom.LineString([]);
        //矢量图层层
        let aircfaftLayer = new ol.layer.Vector({//飞机图层
            source:new ol.source.Vector(),
            updateWhileInteracting: true,
            updateWhileAnimating: true
        })
        let flightTrackLayer = new ol.layer.Vector({//航迹线图层
            source:new ol.source.Vector({
                features:[
                    new ol.Feature({
                        geometry:trackLine
                    })
                ]
            }),
            style:route_style,
            updateWhileInteracting: true
        });
        let velLayer = new ol.layer.Vector({//速度矢量线图层

3.初始化地图

/*
         * @name: 初始化地图
         * @description: 
         * @param {type} none
         * @return: 
           
        */
        let center = new ol.proj.fromLonLat([104.06250000000001, 30.65681556429287]);
        //地图
        let map = new ol.Map({
            //图层顺序自下而上