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

叁歲伎倆 2021-12-17 07:19 433阅读 0赞

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

![1450986-20190403160324901-868999422.jpg][]

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

![1450986-20190403161053889-2140296725.gif][]

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

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

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

### 技术准备 ###

常规的数学公式都知道，路程 = 速度 \* 时间，在地图上的一些相关计算，查阅了一些资料，并翻译了相关的计算博文《[(译)计算距离、方位以及更多经纬度之间的点][Link 1]》，并Google到了一个相关的[技术博客][Link 2]，只不过这是基于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({
                //图层顺序自下而上
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM({ })
                    }),flightTrackLayer,velLayer,aircfaftLayer,
                ],
                renderer: 'canvas',
                target: 'map',
                view: new ol.View({
                    center: center,
                    zoom: 6
                })
            });
            
            /**
             * @name: 飞机  标牌 样式
             * @description: 
             * @param {type} none
             * @return: 
             */
            //标牌叠加层 + 指引线
            let markerEl = document.getElementById('geo-marker');//标牌
            let marker = new ol.Overlay({
                positioning: 'bottom-center',
                stopEvent: false,
                dragging: false,
                offset: [0, -10],
                element: markerEl,
                stopEvent: false
            });
            map.addOverlay(marker);
            
            //飞机样式 以点代替飞机图片
            function createGoodStyle() {
                return new ol.style.Style({
                    image:new ol.style.Circle({
        //点状模拟飞机
                        radius:6,
                        snapToPixel:false,
                        fill:new ol.style.Fill({
                            color:'yellow'
                        }),
                        stroke:new ol.style.Stroke({
                            color:"#333",
                            width:2
                        })
                    })
                    
                });
            }
            //设置地图中心
            let centerAir = val => {
                map.getView().setCenter(val);
            }

#### 4.加载数据 ####

/**
             * @name: 加载数据
             * @description: 
             * @param {type} none
             * @return: 
             */
            //添加飞机 + 更新位置
            
            const KTS2KPH = 1.85200;//1 knot (kt) = 1.85200 kilometer per hour (kph) 
            const NM2KM = 1.852;
            const pred_secs = 5 * 60; //5分钟
            const bearing = 90; //航向
            let coords = [], speedMH = [], flightData, intervalId, interval = 1000, i = 0;
            let from , to, distance_whole, tiem_whole, distance_cur, point_cur, point_next;
            const url = './data/openflights/vel.json';
            let theAirplane = new ol.Feature([]);
    
            $('.startAnimate').click(() => {
                //加载坐标数据
                $.ajax({
                    url: url,
                    dataType: 'json',
                    success: function (response) {
                        console.log("飞行开始");
                        flightData = response.data;
                        coords = flightData.map(obj => {
        //坐标集合
                            return obj[0];
                        })
                        speedMH = flightData.map(obj => {
        //速度集合
                            return obj[1];
                        })
                        //飞机
                        theAirplane.setId(response.aircraftNum);
                        theAirplane.setStyle(createGoodStyle());
                        aircfaftLayer.getSource().addFeature(theAirplane);
    
                        //预测点
                        let vel_point = new ol.Feature([]);
                        vel_point.setStyle(point_style);
                        velLayer.getSource().addFeature(vel_point);
    
                        //模拟飞行    
                        intervalId = setInterval(() => {
                            let position;
                            position = ol.proj.fromLonLat(coords[i]);
    
                            //标牌
                            marker.setPosition(position);
                            markerEl.innerHTML = response.aircraftNum;//简标牌
    
                            //飞机
                            theAirplane.setGeometry(new ol.geom.Point(position));
    
                            //航迹
                            let point = new ol.proj.transform(coords[i], 'EPSG:4326', 'EPSG:3857');
                            trackLine.appendCoordinate(point);
    
                            //以飞机当前位置为地图中心
                            centerAir(position);
    
                            
                            
                            //速度矢量线
                            from = new LatLon(coords[0][1], coords[0][0]);//起点
                            to = new LatLon(coords[coords.length - 1][1], coords[coords.length - 1][0]);//终点
                            // console.log(from, to);
    
                            distance_whole = from.distanceTo(to) / 1000;// km 总里程
                            tiem_whole = distance_whole / speedMH[i] / KTS2KPH;// hour 总耗时
                            // console.log(distance_whole, tiem_whole);
    
                            point_cur = new LatLon(coords[i][1], coords[i][0]);//当前坐标
                            distance_cur = KTS2KPH * speedMH[i] * ( pred_secs * interval  / 3600); //已经过里程
                            point_next = point_cur.destinationPoint(distance_cur, bearing); //预测5分钟后所在的坐标点
                            // console.log( distance_whole, tiem_whole, distance_cur, point_next);
                            let pointCur = ol.proj.fromLonLat([point_cur._lon, point_cur._lat]);
                            let pointNext = ol.proj.fromLonLat([point_next._lon, point_next._lat]);
    
                            let pointNextArray = Array();
                            pointNextArray.push(pointNext);
                            console.log(pointNextArray);
    
                            //预测点
                            vel_point.setGeometry(new ol.geom.Point(pointNext));
                            
                            //速度矢量线
                            let velFeature = new ol.Feature(velLine);
                            velFeature.setStyle(vel_style);
                            velLine.setCoordinates([pointCur, pointNext]); //绘制速度矢量线
                            velLayer.getSource().addFeature(velFeature);
    
                            i++;
                            if (i === flightData.length) {
                                clearInterval(intervalId);
                                console.log("飞行结束");
                            }
    
                        }, interval);
                    
                    }
                })
            })

#### 5.json数据 ####

json数据来源于[arc.js][],该例子选取的是成都—上海的坐标数据，速度是我自己随意添加的：

{
    
        "ID": "1",
        "aircraftNum": "B000",
        "data": [
            [[104.06250000000001, 30.65681556429287], "284"],
            [[104.23659653944907, 30.67396833485058], "285"],
            [[104.4107544999246, 30.690888911014596], "285"],
            [[104.58497310591778, 30.70757705503652], "286"],
            [[104.75925157857333, 30.724032532190993], "284"],
            [[104.93358913572729, 30.740255110788784], "286"],
            [[105.10798499194534, 30.75624456218971], "287"],
            [[105.28243835856125, 30.772000660815337], "288"],
            [[105.45694844371592, 30.787523184161603], "288"],
            [[105.63151445239656, 30.80281191281125], "287"],
            [[105.80613558647657, 30.817866630446186], "288"],
            [[105.98081104475536, 30.8326871238596], "287"],
            [[106.15554002299895, 30.847273182967992], "287"],
            [[106.33032171398055, 30.861624600823], "286"],
            [[106.50515530752187, 30.875741173623137], "285"],
            [[106.68003999053437, 30.889622700725297], "287"],
            [[106.85497494706121, 30.90326898465615], "285"],
            [[107.02995935831927, 30.916679831123393], "288"],
            [[107.20499240274177, 30.929855049026738], "287"],
            [[107.38007325602092, 30.942794450468945], "286"],
            [[107.55520109115115, 30.95549785076639], "285"],
            [[107.73037507847249, 30.967965068459744], "287"],
            [[107.90559438571445, 30.98019592532436], "286"],
            [[108.08085817803996, 30.992190246380456], "288"],
            [[108.25616561808987, 31.003947859903253], "287"],
            [[108.43151586602752, 31.01546859743276], "285"],
            [[108.60690807958395, 31.026752293783623], "286"],
            [[108.7823414141029, 31.0377987870545], "285"],
            [[108.9578150225866, 31.0486079186376], "287"],
            [[109.13332805574153, 31.059179533227734], "285"],
            [[109.30887966202457, 31.069513478831404], "286"],
            [[109.48446898768944, 31.079609606775563], "285"],
            [[109.66009517683327, 31.089467771716325], "287"],
            [[109.83575737144373, 31.099087831647413], "285"],
            [[110.011454711446, 31.108469647908397], "287"],
            [[110.18718633475038, 31.11761308519283], "288"],
            [[110.36295137729994, 31.126518011556165], "289"],
            [[110.53874897311843, 31.135184298423425], "287"],
            [[110.7145782543585, 31.14361182059676], "286"],
            [[110.89043835135004, 31.151800456262833], "285"],
            [[111.06632839264884, 31.1597500869999], "286"],
            [[111.24224750508553, 31.16746059778481], "287"],
            [[111.4181948138144, 31.17493187699975], "288"],
            [[111.5941694423629, 31.182163816438862], "289"],
            [[111.77017051268102, 31.18915631131456], "290"],
            [[111.94619714519094, 31.195909260263747], "288"],
            [[112.1222484588369, 31.202422565353807], "288"],
            [[112.29832357113521, 31.208696132088367], "288"],
            [[112.47442159822452, 31.21472986941292], "288"],
            [[112.65054165491617, 31.220523689720157], "287"],
            [[112.82668285474469, 31.226077508855244], "287"],
            [[113.00284431001862, 31.231391246120737], "288"],
            [[113.17902513187131, 31.236464824281384], "287"],
            [[113.35522443031194, 31.241298169568736], "286"],
            [[113.53144131427662, 31.245891211685535], "285"],
            [[113.70767489167979, 31.250243883809823], "285"],
            [[113.88392426946552, 31.254356122599024], "285"],
            [[114.0601885536591, 31.258227868193615], "286"],
            [[114.23646684941869, 31.26185906422076], "285"],
            [[114.41275826108706, 31.265249657797618], "287"],
            [[114.58906189224348, 31.268399599534526], "287"],
            [[114.76537684575561, 31.271308843537938], "286"],
            [[114.94170222383167, 31.27397734741316], "287"],
            [[115.11803712807243, 31.276405072266883], "288"],
            [[115.2943806595235, 31.27859198270948], "288"],
            [[115.47073191872758, 31.28053804685718], "288"],
            [[115.64709000577683, 31.282243236333912], "288"],
            [[115.82345402036526, 31.28370752627301], "288"],
            [[115.99982306184107, 31.284930895318737], "288"],
            [[116.17619622925929, 31.285913325627515], "288"],
            [[116.35257262143426, 31.28665480286904], "288"],
            [[116.52895133699217, 31.28715531622708], "288"],
            [[116.70533147442355, 31.28741485840016], "287"],
            [[116.8817121321361, 31.28743342560202], "288"],
            [[117.0580924085071, 31.28721101756178], "288"],
            [[117.23447140193603, 31.286747637524012], "287"],
            [[117.41084821089731, 31.286043292248515], "287"],
            [[117.58722193399282, 31.285097992009906], "287"],
            [[117.76359167000443, 31.283911750597046], "287"],
            [[117.93995651794664, 31.282484585312172], "286"],
            [[118.11631557711907, 31.280816516969885], "286"],
            [[118.29266794715906, 31.278907569895903], "286"],
            [[118.46901272809394, 31.276757771925578], "286"],
            [[118.64534902039362, 31.27436715440231], "286"],
            [[118.82167592502275, 31.271735752175562], "286"],
            [[118.99799254349321, 31.268863603598895], "286"],
            [[119.17429797791613, 31.26575075052759], "285"],
            [[119.35059133105422, 31.262397238316204], "285"],
            [[119.52687170637368, 31.258803115815805], "285"],
            [[119.70313820809623, 31.254968435371172], "285"],
            [[119.87938994125103, 31.250893252817523], "285"],
            [[120.05562601172639, 31.2465776274773], "285"],
            [[120.2318455263214, 31.242021622156606], "285"],
            [[120.40804759279759, 31.237225303141468], "285"],
            [[120.58423131993031, 31.232188740193873], "285"],
            [[120.76039581756008, 31.226912006547636], "285"],
            [[120.93654019664363, 31.221395178904057], "284"],
            [[121.11266356930511, 31.215638337427364], "284"],
            [[121.28876504888679, 31.20964156573994], "284"],
            [[121.46484375, 31.203404950917395], "283"]
        ]
    
    }

后续要完成的就是拖拽飞机标牌以及控制图层的显示与隐藏

查看源码：[GitHub][]

转载于:https://www.cnblogs.com/suRimn/p/10649816.html

[1450986-20190403160324901-868999422.jpg]: /images/20211217/3e6b5e6946464a0cb26268cb950924e4.png
[1450986-20190403161053889-2140296725.gif]: /images/20211217/0600cf848bd74a89a83151b5b6e997fc.png
[JSON]: https://www.cnblogs.com/suRimn/p/10642108.html
[Link 1]: https://www.cnblogs.com/suRimn/p/10491277.html
[Link 2]: http://geoffair.org/fg/map-test2/
[arc.js]: http://springmeyer.github.io/arc.js/
[GitHub]: https://github.com/sueRimn/OL3Examples