无人机航线规划

Vue3大家应该很熟悉了,但天地图相关的解决方案是真的少,所以这里重点讲的是利用天地图实现的案例 ,这篇文章分为两部分

1.vue3 中使用天地图
2.使用天地图实现无人机航线规划

vue3中使用天地图

vue相关的就不提了,无论是新创建还是已有的 ,jym可能比我还熟 ,我们把重点放在天地图这块

先简单讲一下天地图的优势 , 天地图隶属于国家地理信息公共平台 ,与其他地图相比最显著的优势就是绝对的精准以及在其他地图很多地方的卫星地图放到50倍以下时不会出现此区域无卫星图 ,这两个点对于二次开发地图有精度和卫星图需求的是非常恼火的

我这里呢使用的是 API 4.0 版本的 ,至于为啥不用3.0 ,前期测试了一下,那真的是一把鼻涕一把泪!谁用谁知道

注册账户拿到key ,并放到vue的index.html中
这个不复杂 ,按照步骤来

先注册,注册好了后创建对应的应用

再把你的key复制到下面这行代码

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>

把这行代码放到index.html中

然后就是大部分地图必不可少的一步了,地图的载体

<div id="mapDiv" style="position:absolute;width:100vw; height:100vh"></div>

由于使用定位很明确,无人机规划航线 ,所以这里就只用卫星地图

我这里是有使用版权控件

//版权控件
var copyControl = new T.Control.Copyright({ position: T_ANCHOR_TOP_LEFT });
map.addControl(copyControl);
var bs = map.getBounds();   //返回地图可视区域
copyControl.addCopyright({
    id: 1,
    content: "<a href='https://www.tianditu.gov.cn' target='_blank' style='font-size:24px;'>版权</a>",
    bounds: bs
});

使用天地图实现航线规划

接着是添加右键自定义菜单,这里是有加分割线的

//右键菜单
var menu = new T.ContextMenu({ width: 140 });
//添加右键菜单

var txtMenuItem = [
    {
        text: '放大',
        callback: function () {
            map.zoomIn()
        }
    },
    {
        text: '缩小',
        callback: function () {
            map.zoomOut()
        }
    },
    {
        text: '添加航点',
        isDisable: false,
        callback: function (lnglat) {
            OverLay(lnglat.getLng(), lnglat.getLat())
        }
    }
];


for (var i = 0; i < txtMenuItem.length; i++) {
    //添加菜单项
    var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback);
    //item.disable();
    menu.addItem(item);
    if (i == 1 || i == 3) {
        //添加分割线
        menu.addSeparator();
    }
}
map.addContextMenu(menu);

在添加航点的右键菜单事件上有几个地方需要注意一下

添加航点是需要当前点的经纬度坐标,他可以通过 MenuItem构造函数的callback获取点击菜单的回调函数,自己命名一个参数接收,然后在用 getLng() 和 getLat() 方法获取坐标 , 天地图的文档优点很多地方都还不是很完善,所以很多地方都需要我们自己去测试

下面是添加航点和多个航点构成航线的方法,这里考虑到添加时,是属于添加图层,每次在添加时,都会叠加一个图层,这样在编辑航线时就会出问题,我这里的思路是在每次添加时,都清空图层,再重新添加所有坐标

基于在添加航线时,可能会有查看航点数据,添加飞行高度,飞行速度,动作等,在添加航点时就必须加入复杂信息窗口,方法如下,这个就不做过多解释了,拿来就用

然后就是重点了,我这里把航线编辑功能按钮单独放出来了

newControl = new T.Control({ position: T_ANCHOR_TOP_LEFT });
newControl.onAdd = function (map) {
    var container = document.createElement("div");
    var zicsstext = "font-size:12px;border:solid 2px blue;background:#fff;padding:2px;line-height:15px;cursor:pointer;";
    var zocsstext = "font-size:12px;border:solid 2px blue;background:#fff;padding:2px;line-height:15px;cursor:pointer;";
    this.zoomInButton = createButton("启用编辑", "启用编辑", 'a', container, zicsstext);
    this.zoomOutButton = createButton("关闭编辑", "关闭编辑", 'b', container, zocsstext);
    this.zoomInButton.onclick = zoomIn;
    this.zoomOutButton.onclick = zoomOut;
    return container;
};
newControl.onRemove = function (map) {
    //移除控件时要释放
    delete this.zoomInButton;
    delete this.zoomOutButton;
}

map.addControl(newControl);
function zoomIn() {//启用编辑
// console.log(points);
bleEdit(true) }
function zoomOut() { //关闭编辑
bleEdit(false)
}
const bleEdit = (e) => {


// e? line.enableEdit(): line.disableEdit()
map.clearOverLays();
let data = line.getLngLats() //获取顶点数据
line = new T.Polyline(points);
if (e) { //开启编辑
    map.addOverLay(line);
    line.enableEdit()
} else {//关闭编辑
    line.disableEdit()
    points = data
    for (var i = 0; i < data.length; i++) {
        marker = new T.Marker(data[i])
        map.addOverLay(marker);
    }
    line = new T.Polyline(data);
    map.addOverLay(line);
} }

这里需要注意的是,由于线,和点,是相对独立的,所以在编辑航线时,是不会同步更改点的数据,点的图层也比线高,在有点的情况下,你根本就点不到线,所以我这里的处理思路是,在编辑航线时,线清除所有图层,在通过线的.getLngLats()方法获取航线的顶点数据,这样能保证你每次拿到的都是最新的坐标数据,然后在开启编辑时,只绘制航线,而在关闭时,即绘制航点,又绘制航线,这样就达到了添加航线的基础功能

下面是演示

2023-07-10 11-34-13_4.gif