Qt編寫安防視頻監控系統25-離線地圖

一、前言

離線地圖這個功能是近期才完成的，老早以前就很多人問有沒有離線地圖的功能，之前也大致了解過如何做離線地圖，其實最核心的不是代碼，而是如何搞到免費的離線地圖文件，離線地圖下載器網上大部分都是收費的，而且好像還不便宜，后面找了很多終於找到個簡單的可用的，可以指定城市進行離線地圖的下載，離線地圖一般使用百度的或者高德的居多，其實對於在線地圖使用比較熟練的話，那些方法完全一致的，理論上廠家做成的api接口也會統一的，唯一的不同就是引入的js文件不一樣，使用方法和處理流程是完全一樣的，於是抽空花了點時間重新整理封裝了一個百度地圖類，同時支持在線地圖和離線地圖兩種模式。

地圖類功能特點：

1. 同時支持在線地圖和離線地圖兩種模式。
2. 同時支持webkit內核、webengine內核、IE內核。
3. 支持設置多個標注點，信息包括名稱、地址、經緯度。
4. 可設置地圖是否可單擊、拖動、鼠標滾輪縮放。
5. 可設置協議版本、秘鑰、主題樣式、中心坐標、中心城市、地理編碼位置等。
6. 可設置地圖縮放比例和級別，縮略圖、比例尺、路況信息等控件的可見。
7. 支持地圖交互，比如鼠標按下獲取對應位置的經緯度。
8. 支持查詢路線，可設置起點位置、終點位置、路線模式、路線方式、路線方案（最少時間、最少換乘、最少步行、不乘地鐵、最短距離、避開高速）。
9. 可顯示點線面工具，可直接在地圖上划線、點、矩形、圓形等。
10. 可設置行政區划，指定某個城市區域繪制圖層，在線地圖自動輸出行政區划邊界點集合到js文件給離線地圖使用。
11. 可添加多個覆蓋物。支持點、折線、多邊形、矩形、圓形、弧線等。
12. 函數接口友好和統一，使用簡單方便，就一個類。
13. 支持任意Qt版本、任意系統、任意編譯器。

視頻控件開源地址：https://gitee.com/feiyangqingyun/QWidgetDemo https://github.com/feiyangqingyun/QWidgetDemo
文件名稱：videowidget

體驗地址：https://gitee.com/feiyangqingyun/QWidgetExe https://github.com/feiyangqingyun/QWidgetExe
文件名稱：bin_video_system.zip

二、功能特點

1. 支持16畫面切換，全屏切換等，包括1+4+6+8+9+13+16畫面切換。
2. 支持alt+enter全屏，esc退出全屏。
3. 自定義信息框+錯誤框+詢問框+右下角提示框。
4. 17套皮膚樣式隨意更換，所有樣式全部統一，包括菜單等。
5. 雲台儀表盤鼠標移上去高亮，八個方位精准識別。
6. 底部畫面工具欄（畫面分割切換+截圖聲音等設置）移上去高亮。
7. 可在配置文件更改左上角logo+中文軟件名稱+英文軟件名稱。
8. 封裝了百度地圖，三維切換，設備點位，鼠標按下獲取經緯度等。
9. 堆棧窗體，每個窗體都是個單獨的qwidget，方便編寫自己的代碼。
10. 頂部鼠標右鍵菜單，可動態控制時間CPU+左上角面板+左下角面板+右上角面板+右下角面板的顯示和隱藏，支持恢復默認布局。
11. 工具欄可以放置多個小圖標和關閉圖標。
12. 左側右側可拖動拉伸，並自動記憶寬高位置，重啟后恢復。
13. 雙擊攝像機節點自動播放視頻，雙擊節點自動依次添加視頻，會自動跳到下一個，雙擊父節點自動添加該節點下的所有視頻。
14. 攝像機節點拖曳到對應窗體播放視頻，同時支持拖曳本地文件直接播放。
15. 視頻畫面窗體支持拖曳交換，瞬間響應。
16. 雙擊節點+拖曳節點+拖曳窗體交換位置，均自動更新url.txt。
17. 支持從url.txt中加載16通道視頻播放，自動記憶最后通道對應的視頻，軟件啟動后自動打開播放。
18. 右下角音量條控件，失去焦點自動隱藏，音量條帶靜音圖標。
19. 集成百度地圖，可以添加設備對應位置，自動生成地圖，支持縮放和三維地圖，提供地圖風格選擇，共12種風格。
20. 視頻拖動到通道窗體外自動刪除視頻。
21. 鼠標右鍵可刪除當前+所有視頻，截圖當前+所有視頻。
22. 錄像機管理、攝像機管理，可添加刪除修改導入導出打印信息，立即應用新的設備信息生成樹狀列表，不需重啟。
23. 在pro文件中可以自由開啟是否加載地圖。
24. 視頻播放可選四種內核自由切換，vlc+ffmpeg+easyplayer+海康sdk，均可在pro中設置。
25. 可設置1+4+9+16畫面輪詢，可設置輪詢間隔以及輪詢碼流類型等，直接在主界面底部工具欄右側單擊啟動輪詢按鈕即可，再次單擊停止輪詢。
26. 默認超過10秒鍾未操作自動隱藏鼠標指針。
27. 支持onvif搜素設備，支持任意onvif攝像機，包括但不限於海康大華宇視天地偉業華為等，支持onvif雲台控制。
28. 高度可定制化，用戶可以很方便的在此基礎上衍生自己的功能，支持linux系統。

三、效果圖

四、核心代碼

#include "frmmaplocal.h"
#include "frmmapweb.h"
#include "ui_frmmaplocal.h"
#include "quiwidget.h"
#include "iconfont.h"
#include "mapbaidu.h"

frmMapLocal::frmMapLocal(QWidget *parent) : QWidget(parent), ui(new Ui::frmMapLocal)
{
    ui->setupUi(this);
    this->initForm();
    this->initTree();
    this->initMap();
}

frmMapLocal::~frmMapLocal()
{
    delete ui;
}

void frmMapLocal::showEvent(QShowEvent *)
{
    static bool isShow = false;
    if (!isShow) {
        isShow = true;
        QTimer::singleShot(100, this, SLOT(loadMap()));
    }
}

void frmMapLocal::initForm()
{
    connect(AppEvent::Instance(), SIGNAL(saveIpcInfo()), this, SLOT(loadMap()));
    ui->widgetRight->setFixedWidth(App::RightWidth);

    ui->navTitle1->setText("信息設置");
    ui->navTitle2->setText("圖層管理");
    ui->navTitle1->setLeftIcon(0xf041);
    ui->navTitle2->setLeftIcon(0xf1b2);
    ui->navTitle2->setRightIcon5(0xf1f8);
}

void frmMapLocal::initTree()
{
    ui->treeWidget->clear();
    ui->treeWidget->setAnimated(false);
    ui->treeWidget->setHeaderHidden(true);
    //ui->treeWidget->setIndentation(0);

    QStringList texts;
    texts << "A" << "B" << "C" << "D";

    for (int i = 0; i < texts.count(); i++) {
        //添加父節點
        QTreeWidgetItem *itemParent = new QTreeWidgetItem(ui->treeWidget);
        itemParent->setText(0, QString("圖層%1").arg(texts.at(i)));

        //循環添加子節點
        for (int j = 0; j < 5; j++) {
            QTreeWidgetItem *itemChild = new QTreeWidgetItem(itemParent);
            itemChild->setText(0, QString("%1%2").arg((j % 2 == 0) ? "地形" : "山脈").arg(j + 1));
            QPixmap iconNormal = IconFont::Instance()->getPixmap(QUIConfig::TextColor, (j % 2 == 0) ? 0xe6f2 : 0xe6ed, 18, 20, 20);
            itemChild->setIcon(0, iconNormal);
        }
    }

    ui->treeWidget->expandAll();
}

void frmMapLocal::initMap()
{
#ifdef webkit
    QWebSettings *webSetting = QWebSettings::globalSettings();
    webSetting->setAttribute(QWebSettings::JavascriptEnabled, true);
    webSetting->setAttribute(QWebSettings::PluginsEnabled, true);
    webSetting->setAttribute(QWebSettings::JavascriptCanOpenWindows, true);

    webView = new QWebView;
    ui->layout->addWidget(webView);
    connect(webView->page(), SIGNAL(loadFinished(bool)), this, SLOT(loadFinished()));
#elif webengine
    QWebEngineSettings *webSetting = QWebEngineSettings::globalSettings();
    webSetting->setAttribute(QWebEngineSettings::JavascriptEnabled, true);
    webSetting->setAttribute(QWebEngineSettings::PluginsEnabled, true);
    webSetting->setAttribute(QWebEngineSettings::JavascriptCanOpenWindows, true);

    webView = new QWebEngineView;
    ui->layout->addWidget(webView);

    QWebChannel *channel = new QWebChannel(this);
    channel->registerObject("objName", MapData::Instance());
    webView->page()->setWebChannel(channel);
    connect(MapData::Instance(), SIGNAL(receiveDataFromJs(QVariant)), this, SLOT(receiveData(QVariant)));
    connect(webView->page(), SIGNAL(loadFinished(bool)), this, SLOT(loadFinished()));
#elif webie
    webView = new QAxWidget;
    ui->layout->addWidget(webView);
    webView->setControl("{8856F961-340A-11D0-A96B-00C04FD705A2}");
#endif
}

void frmMapLocal::loadMap()
{
    QString fileName = QUIHelper::appPath() + "/config/deviceall.html";
    QString url = "file:///" + fileName;

    MapBaiDu::Instance()->reset();
    MapBaiDu::Instance()->setFileName(fileName);
    MapBaiDu::Instance()->setSaveFile(false);
    MapBaiDu::Instance()->setMapLocal(true);
    MapBaiDu::Instance()->setShowOverlayTool(true);
    MapBaiDu::Instance()->setEnableClickPoint(true);

    //設置默認的中心點坐標,建議采用中心點坐標的方式
    MapBaiDu::Instance()->setMapCenterPoint("121.414,31.1828");
    //設置默認中心城市,在線地圖可設置
    //MapBaiDu::Instance()->setMapCenterCity("上海");

#ifndef webie
    MapBaiDu::Instance()->setCallFun(QString("%1.receiveData").arg("objName"));
#endif

    QStringList deviceNames, deviceAddrs, devicePoints;
#if 0
    for (int i = 1; i <= 100; i++) {
        deviceNames << QString("攝像頭%1").arg(i);
        deviceAddrs << QString("測試地址%1").arg(i);
        devicePoints << QString("121.%1,31.%2").arg(qrand() % 1000000).arg(qrand() % 1000000);
    }
#elif 0
    deviceNames << "攝像頭1" << "攝像頭2" << "攝像頭3" << "攝像頭4" << "攝像頭5";
    deviceAddrs << "安波路533弄1號樓" << "北新路8號" << "康橋鎮康橋路1200號(御青路)" << "閔行區諸翟鎮紀翟南路" << "浦東新區廣蘭路1080號(紫薇路口)";
    devicePoints << "121.534942,31.307706" << "121.572075,31.188825" << "121.57987,31.155795" << "121.292628,31.215278" << "121.626992,31.211056";
#else
    //從數據庫加載
    deviceNames = DBData::IpcInfo_IpcName;
    deviceAddrs = DBData::IpcInfo_IpcAddr;
    devicePoints = DBData::IpcInfo_IpcPosition;
#endif

    MapBaiDu::Instance()->setShowTrafficControl(true);
    MapBaiDu::Instance()->setShowNavigationControl(true);
    MapBaiDu::Instance()->setMarkerInfo(deviceNames, deviceAddrs, devicePoints);
    QString content = MapBaiDu::Instance()->newMap();

    //下面為兩種方式加載網頁,如果內容為空則加載網頁文件否則加載內容
    //一般為了保密建議加載內容,這樣看不到生成的網頁文件
    //可能在linux上的webkit內核需要用load的方式加載
    if (MapBaiDu::Instance()->getSaveFile()) {
#ifdef webkit
        webView->load(QUrl(url));
#elif webengine
        webView->load(QUrl(url));
#elif webie
        webView->dynamicCall("Navigate(const QString&)", url);
#endif
    } else {
        QUrl baseUrl(QString("%1/config/").arg(QUIHelper::appPath()));
#ifdef webkit
        webView->setHtml(content, baseUrl);
#elif webengine
        webView->setHtml(content, baseUrl);
#endif
    }
}

void frmMapLocal::receiveData(const QVariant &data)
{
    //演示如何從地圖上標注點獲取到經緯度
    if (!data.isNull()) {
        QStringList list = data.toString().split(",");
        double longitude = list.at(0).toDouble();
        double latitude = list.at(1).toDouble();

        //取小數點后6位
        QString strLongitude = QString::number(longitude, 'f', 6);
        QString strLatitude = QString::number(latitude, 'f', 6);
        ui->txtLongitude->setText(strLongitude);
        ui->txtLatitude->setText(strLatitude);
    }
}

void frmMapLocal::loadFinished()
{
#ifdef webkit
    webView->page()->mainFrame()->addToJavaScriptWindowObject("objName", this);
#endif
}