绘图工具条实现地图标记交互应用

后端

2024-02-18 03:45:25

Qt编写地图综合应用44-悬浮工具条

了解了Qt编写地图综合应用，基本控制一些地图操作及显示情况后，现在我们来讲一下Qt结合地图的绘制。有时候我们需要在地图上面做标记，就需要将这些功能应用在地图上，那么我们就用悬浮工具条来实现。

1.前言

百度地图内置了悬浮工具条，可以自行开启，包括离线地图也可以开启，用到了DrawingManager这个库，鼠标绘制工具条库，提供鼠标绘制点、线、面、多边形（矩形、圆）的编辑工具条的开源代码库。

2.绘制工具条步骤

绘制工具条步骤：

首先在MapView控件上右键，选择更多地图右键功能，就会看到悬浮工具条开关。
开启悬浮工具条开关之后，会出现百度地图悬浮工具条。
鼠标移动到工具条上面，就会看到工具条上面的一些图标，表示这些功能分别是：

点标记。
折线。
多边形。
圆。
矩形。
清除所有绘制的图形。

比如我们点击点标记，这个时候就可以在地图上绘制点标记，鼠标在地图上移动的时候就会出现一个红色的点标记，我们点击鼠标，就会绘制出一个点标记，这个点标记可以拖动移动，也可以点击右键删除。
同样的道理，我们也可以在地图上绘制折线、多边形、圆、矩形等图形，这些图形都可以拖动移动，也可以点击右键删除。
如果我们想清除所有绘制的图形，只需要点击清除所有绘制的图形按钮，就可以清除所有绘制的图形。

3.API实现

在主窗口的类中引入QWebEngineView头文件，并创建一个QWebEngineView类的对象webView；
在主窗口的类中引入QGridLayout头文件，并创建一个QGridLayout类的对象layout；
在主窗口的构造函数中，将webView和layout添加到主窗口的中央区域；
在主窗口的构造函数中，设置webView的URL为百度地图的网址；
在主窗口的构造函数中，设置layout的间距为0；
在主窗口的resizeEvent函数中，重新设置layout的尺寸；
在主窗口的keyPressEvent函数中，判断键盘事件是否为Esc键，如果是，则关闭主窗口；
在主窗口的mousePressEvent函数中，判断鼠标事件是否为鼠标左键单击，如果是，则在地图上添加一个标记；
在主窗口的mouseMoveEvent函数中，判断鼠标事件是否为鼠标左键移动，如果是，则在地图上移动标记；
在主窗口的mouseReleaseEvent函数中，判断鼠标事件是否为鼠标左键释放，如果是，则在地图上释放标记。

4.效果演示

在主窗口的类中添加以下代码：

#include <QWebEngineView>
#include <QGridLayout>
#include <QKeyEvent>
#include <QMouseEvent>

MainWindow::MainWindow()
{
    webView = new QWebEngineView;
    layout = new QGridLayout;

    webView->setUrl(QUrl("https://map.baidu.com"));
    layout->setSpacing(0);

    setCentralWidget(webView);
    setLayout(layout);
}

void MainWindow::resizeEvent(QResizeEvent *event)
{
    layout->setGeometry(0, 0, event->size().width(), event->size().height());
}

void MainWindow::keyPressEvent(QKeyEvent *event)
{
    if (event->key() == Qt::Key_Escape)
    {
        close();
    }
}

void MainWindow::mousePressEvent(QMouseEvent *event)
{
    if (event->button() == Qt::LeftButton)
    {
        QPointF point = webView->mapToGlobal(event->pos());
        webView->page()->runJavaScript("addMarker(" + QString::number(point.x()) + ", " + QString::number(point.y()) + ");");
    }
}

void MainWindow::mouseMoveEvent(QMouseEvent *event)
{
    if (event->buttons() & Qt::LeftButton)
    {
        QPointF point = webView->mapToGlobal(event->pos());
        webView->page()->runJavaScript("moveMarker(" + QString::number(point.x()) + ", " + QString::number(point.y()) + ");");
    }
}

void MainWindow::mouseReleaseEvent(QMouseEvent *event)
{
    if (event->button() == Qt::LeftButton)
    {
        QPointF point = webView->mapToGlobal(event->pos());
        webView->page()->runJavaScript("releaseMarker(" + QString::number(point.x()) + ", " + QString::number(point.y()) + ");");
    }
}