论地图在无人机地面站中的重要性

iso10000

本文同步转载于微信公众号--欣飞鸽
欣飞鸽
原文链接--
论地图在无人机地面站中的重要性

地图在地面站当中一个很重要的作用就是美观，充当很大一部分的门面；另外一个重要的作用就是显示航迹，并且可以作为设置航点的参考。这里将地图相关内容进行补充，授人以渔。
<hr/>

• 加载地图：
  

地图主要包含两种，在线地图和离线地图。在线地图通过联网加载html文件，从而在控件中显示网页地图；而离线地图通过加载下载到本地的地图瓦片，从而没有网络也可以正常显示地图。离线地图的API开发没有在线地图的完善，这里重点进行加载在线地图的讲解。
1
首先是.pro支持webkitwidgets webkit
QT  += webkitwidgets webkit
2
然后在widget.cpp中进行webView的初始化。
代码较多，在此不占用篇幅，可查看提供的源代码，初始化完成后，可加载对应的html文件进行显示。
ui->webView->
setUrl(QUrl("file:///D:/gaodemap/1.html"));
ui->webView->show();
其中：file:///D:/gaodemap/1.html使用的是绝对路径，需要将对应文件放置到指定位置，否则会加载失败。或者采用相对路径，将地图文件放置在工程目录中，如下：
qstrfilepath=QFileInfo("debug/gaodemap/1.html").absoluteFilePath();//相对路径转绝对路径
qstrurl=QString("<a href="http://file///%1%22).arg(qstrfilepath);" _src="http://file:///%1").arg(qstrfilepath);" style="">file:///%1").arg(qstrfilepath);
ui->webView->setUrl(QUrl(qstrurl));
3
注意：经过上面的设置，如果D:/gaodemap/1.html该文件可以双击正常打开，那么在控件中便可正常显示，如果1.html文件本身内容有误，便会加载不出来。
<hr/>

• 添加删除航点：
  

1、在线地图的选择
在线地图包含很多种，有百度地图，高德地图，谷歌地图，如果可以连接谷歌地图可以参考使用谷歌地图的API，进行谷歌在线地图的设计。在国内推荐使用高德地图，采用阿里巴巴集团旗下的高德开放平台：
https://developer.amap.com/demo/jsapi-v2/example/map-componets/map-overlays
该开放平台提供了很多示例，基于此示例，开发者可以去编辑自己的html文件，从而进行特定功能的设计。
2、添加/删除航点
创建默认图标的点标记
// 创建一个 Marker 实例：
var marker = new AMap.Marker({
    position: new AMap.LngLat(116.39, 39.9),  
// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] title: '北京'
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
// 移除已创建的
markermap.remove(marker);
<hr/>

• 绘制航迹
  

1、绘制飞机实时航线
实时绘制飞机航线变化，需要从串口或者UDP等通信中获取飞机实时的经纬度，从而将上一时刻的飞机位置和当前位置进行绘制折线，飞机坐标点的icon进行位置变化。
2、航线规划
航线规划是通过鼠标点击地图，进行折线绘制并可在航点处添加icon标志，在点击的同时将对应位置的经纬度记录下来，从而将任务航点发送到飞控。
https://developer.amap.com/demo/jsapi-v2/example/overlayers/overlay-draw
<hr/>

• QT与JS交互
  

飞机实时的位置信息在qt应用程序中需要传递到地图文件中进行显示（应用程序界面的地图相关按钮的响应也需要传递到地图文件），另外地图文件上的航点设置信息需要传递到qt应用程序中。
1、qt应用程序调用html文件中函数
qt应用程序调用JS脚本函数:
m_pWebView->page()->mainFrame()->
evaluateJavaScript(QString("loadfinishtip()"));
在html文件中对应的函数定义：
    function loadfinishtip() {         alert("amap load finish.");     }
2、html文件调用qt应用程序中函数
html中调用qt应用程序：
Dialog.onMapClicked(lng + "," + lat);   
// 调用Qt槽函数

qt应用程序：
m_pWebView->page()->mainFrame()->
addToJavaScriptWindowObject("Dialog", this);   
// js中添加窗口对象，用于回调Qt槽函数
void Widget::onMapClicked(QString msg) {     QMessageBox::information(NULL,
        QObject::tr("Lng&Lat"), msg); }
多实践，多总结，有问题可微信交流~