Qt編寫安防視訊監控系統63-子模組7懸浮地圖

一、前言

懸浮地圖子模組，使用的百度地圖，支援線上和離線，用於顯示對應裝置的位置，支援滑鼠直接拖動和縮放。本系統將各個地方需要的地圖模組+瀏覽器模組都合併到一個地圖核心模組，這樣需要使用的時候只需要new這個地圖核心模組就行，而不是寫的到處都是，比如有些通用的公用的引數，只需要在地圖核心模組中設定即可。

目前顯示瓦片地圖採用的瀏覽器模組來展示，優點是編寫方便，直接用現成的公開的百度地圖瓦片地圖載入，缺點是依賴瀏覽器模組，相對比較臃腫，有些嵌入式板子效能有限，搞個瀏覽器模組直接累死，所以還有一種方式是採用瓦片地圖演算法繪製，這樣就拋棄了對瀏覽器的依賴，更加的跨平臺和可移植。

二、功能特點

（一）軟體模組

1. 視訊監控模組，各種停靠小窗體子模組，包括裝置列表、圖文警情、視窗資訊、雲臺控制、預置位、巡航設定、裝置控制、懸浮地圖、網頁瀏覽等。
2. 視訊回放模組，包括本地回放、遠端回放、裝置播放、圖片回放、視訊上傳等。
3. 電子地圖模組，包括圖片地圖、線上地圖、離線地圖、路徑規劃等。
4. 日誌查詢模組，包括本地日誌、裝置日誌等。
5. 系統設定模組，包括系統設定（基本設定、視訊引數、資料庫設定、地圖配置、串列埠配置等）、錄影機管理、攝像機管理、輪詢配置、使用者管理等。

（二）基礎功能

1. 支援各種視訊流（rtsp、rtmp、http等）、視訊檔案（mp4、rmvb、avi等）、本地USB攝像機播放。
2. 支援多畫面切換，包括1、4、6、8、9、13、16、25、36、64畫面切換。
3. 支援全屏切換，多種切換方式包括滑鼠右鍵選單、工具欄按鈕、快捷鍵（alt+enter全屏，esc退出全屏）。
4. 支援視訊輪詢，包括1、4、9、16畫面輪詢，可設定輪詢分組（輪詢預案）、輪詢間隔、碼流型別等。
5. 支援onvif協議，包括裝置搜尋、雲臺控制、裝置控制（圖片引數、校對時間、系統重啟，抓拍圖片等）。
6. 支援許可權管理，不同的使用者可以對應不同的模組許可權，比如刪除日誌、關閉系統等。
7. 資料庫支援多種，包括sqlite、mysql、sqlserver、postgresql、oracle、人大金倉等。
8. 本地USB攝像機支援設定解析度、幀率等引數。
9. 所有停靠模組都自動生成對應的選單用來控制顯示和隱藏，在標題欄右鍵可以彈出。
10. 支援顯示所有模組、隱藏所有模組、復位普通佈局、復位全屏佈局。
11. 雙擊裝置彈出實時預覽視訊，支援圖片地圖、線上地圖、離線地圖等。
12. 攝像機節點拖曳到對應窗體播放視訊，同時支援拖曳本地檔案直接播放。
13. 刪除視訊支援滑鼠右鍵刪除、懸浮條關閉刪除、拖曳到視訊監控面板外刪除等多種方式。
14. 圖片地圖上裝置按鈕可自由拖動，自動儲存位置資訊。百度地圖上可以滑鼠單擊獲取經緯度資訊，用來更新裝置位置。
15. 視訊監控面板窗體中任意通道支援拖曳交換，瞬間響應。
16. 封裝了百度地圖，檢視切換，運動軌跡，裝置點位，滑鼠按下獲取經緯度等。
17. 雙擊節點、拖曳節點、拖曳窗體交換位置等操作，均自動更新儲存最後的播放地址，下次軟體開啟自動應用。
18. 右下角音量條控制元件，失去焦點自動隱藏，音量條帶靜音圖示。
19. 支援視訊截圖，可指定單個或者對所有通道截圖，底部小工具欄也有截圖按鈕。
20. 支援超時自動隱藏滑鼠指標、自動全屏機制。
21. 支援onvif雲臺控制，可上下左右移動雲臺攝像機，包括復位和焦距調整等。
22. 支援任意onvif攝像機，包括但不限於海康、大華、宇視、天地偉業、華為等。
23. 可儲存視訊，可選定時儲存或者單檔案儲存，可選儲存間隔時間。
24. 可設定視訊流通訊方式tcp+udp，可設定視訊解碼是速度優先、質量優先、均衡等。
25. 可設定軟體中文名稱、英文名稱、LOGO圖示等。
26. 儲存的視訊檔案支援匯出到指定目錄，支援批量上傳到伺服器。

（三）特色功能

1. 主介面採用停靠窗體模式，各種元件以小模組的形式加入，可自定義任意模組加入。
2. 停靠模組可拖動任意位置嵌入和懸浮，支援最大化全屏，支援多螢幕。
3. 雙重佈局檔案儲存機制，正常模式、全屏模式都對應不同的佈局方案，自動切換和儲存，比如全屏模式可以突出幾個模組透明顯示在指定位置，更具科幻感現代化。
4. 原創onvif協議機制，採用底層協議解析（udp廣播搜尋+http請求執行命令）更輕量易懂易學習拓展，不依賴任何第三方元件比如gsoap。
5. 原創資料匯入匯出機制，跨平臺不依賴任何元件，瞬間匯出資料。
6. 內建多個原創元件，宇宙超值超級牛逼，包括資料匯入匯出元件（匯出到xls、pdf、列印）、資料庫元件（資料庫管理執行緒、自動清理資料執行緒、萬能分頁、資料請求等）、地圖元件、視訊監控元件、檔案多執行緒收發元件、onvif通訊元件、通用瀏覽器核心元件等。
7. 自定義資訊框+錯誤框+詢問框+右下角提示框（包含多種格式）等。
8. 精美換膚，高達17套面板樣式隨意更換，所有樣式全部統一，包括選單等。
9. 視訊控制元件懸浮條可以自行增加多個按鈕，監控介面底部小工具欄也可自行增加按鈕。
10. 雙擊攝像機節點自動播放視訊，雙擊節點自動依次新增視訊，會自動跳到下一個，雙擊父節點自動新增該節點下的所有視訊。可選主碼流、子碼流。
11. 錄影機管理、攝像機管理，可新增刪除修改匯入匯出列印資訊，立即應用新的裝置資訊生成樹狀列表，不需重啟。
12. 可選多種核心自由切換，ffmpeg、vlc、mpv等，均可在pro中設定。推薦用ffmpeg，跨平臺最多，預設提供好了linux和mac平臺上編譯好的庫。
13. 支援硬解碼，可設定硬解碼型別（qsv、dxva2、d3d11va等）。
14. 預設採用opengl繪製視訊，超低的CPU資源佔用，支援yuyv和nv12兩種格式繪製，很牛逼。
15. 高度可定製化，使用者可以很方便的在此基礎上衍生自己的功能，比如增加自定義模組，增加執行模式、機器人監控、無人機監控、挖掘機監控等。
16. 支援xp、win7、win10、linux、mac、各種國產系統（UOS、中標麒麟、銀河麒麟等）、嵌入式linux等系統。
17. 註釋完整，專案結構清晰，超級詳細完整的使用開發手冊，精確到每個程式碼檔案的功能說明，不斷持續迭代版本。

三、體驗地址

1. 體驗地址：http://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g 提取碼：01jf 檔名：bin_video_system.zip。
2. 國內站點：http://gitee.com/feiyangqingyun
3. 國際站點：http://github.com/feiyangqingyun
4. 個人主頁：http://blog.csdn.net/feiyangqingyun
5. 知乎主頁：http://www.zhihu.com/people/feiyangqingyun/
6. 線上文件：http://feiyangqingyun.gitee.io/qwidgetdemo/video_system/

四、效果圖

五、核心程式碼

#include "frmdevicegps.h"
#include "ui_frmdevicegps.h"
#include "quihelper.h"

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

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

void frmDeviceGps::initForm()
{
    //例項化地圖核心類
    map = new frmMapCore;
    ui->verticalLayout->addWidget(map);

    //關聯載入完成訊號
    connect(map, SIGNAL(loadFinished(bool)), this, SLOT(loadDevice()));
    //關聯資料訊號
    connect(map, SIGNAL(receiveDataFromJs(QString, QVariant)),
            this, SLOT(receiveDataFromJs(QString, QVariant)));

    //賦值百度地圖通訊類
    baidu = map->getMapBaiDu();
    //啟用單擊獲取經緯度
    baidu->setEnableClickPoint(true);
    //設定地圖縮放級別,可以自行調整到自己合適的級別
    baidu->setMapZoom(AppConfig::MapZoom - 1);

    //關聯全域性訊號指定裝置移動
    connect(AppEvent::Instance(), SIGNAL(moveDevice(int, QString, QString)),
            this, SLOT(moveDevice(int, QString, QString)));
}

void frmDeviceGps::loadDevice()
{
    //已經載入過就不用載入
    if (listPoints.count() > 0) {
        return;
    }

    //自定義圖示
    for (int i = 0; i < AppData::GpsDeviceCount; i++) {
        QString js = QString("addMarker('%1', '%2', '', '', 60, '%3', 2, 0, '%4', %5)")
                     .arg(AppData::GpsDeviceNames.at(i), "", AppData::GpsDevicePoints.at(i))
                     .arg(AppData::DeviceIconFile).arg(AppData::DeviceIconSize);
        map->runJs(js);
        listPoints << QStringList();
    }

    //演示測試資料模擬移動
    if (AppConfig::WorkMode == 1 || AppConfig::WorkMode == 2) {
        QTimer::singleShot(1000, this, SLOT(moveDevice()));
    }
}

void frmDeviceGps::moveDevice()
{
    //下面程式碼可以註釋,用於模擬軌跡
#if 0
    //手動填入
    if (AppData::GpsDeviceCount > 0) {
        moveDevice(0, "121.414736", "31.183927");
        moveDevice(0, "121.414516", "31.183838");
        moveDevice(0, "121.414220", "31.183769");
        moveDevice(0, "121.413878", "31.183680");
        moveDevice(0, "121.413384", "31.183579");
    }
    if (AppData::GpsDeviceCount > 1) {
        moveDevice(1, "121.415086", "31.183769");
        moveDevice(1, "121.415095", "31.183599");
        moveDevice(1, "121.415185", "31.183193");
        moveDevice(1, "121.415280", "31.182687");
        moveDevice(1, "121.415302", "31.182286");
    }
#elif 0
    //隨機模擬
    if (AppData::GpsDeviceCount > 0) {
        moveDevice(0, 15, 121.414736, 31.183927, -0.00008, -0.00002);
    }
    if (AppData::GpsDeviceCount > 1) {
        moveDevice(1, 10, 121.415086, 31.183769, 0.00003, -0.00015);
    }
#else
    for (int i = 0; i < AppData::GpsDeviceCount; ++i) {
        //取出初始座標
        QString point = AppData::GpsDevicePoints.at(i);
        QStringList list = point.split(",");
        double lng = list.at(0).toDouble();
        double lat = list.at(1).toDouble();
        moveDevice(i, 15, lng, lat, -0.00008, -0.00002);
    }
#endif
}

void frmDeviceGps::moveDevice(int id, int count, double lngValue, double latValue, double lngOffset, double latOffset)
{
    moveDevice(id, QString::number(lngValue, 'f', 6), QString::number(latValue, 'f', 6));
    for (int i = 0; i < count; i++) {
        //qDebug() << qSetRealNumberPrecision(10) << lngValue << latValue;
        lngValue += lngOffset;
        latValue += latOffset;
        moveDevice(id, QString::number(lngValue, 'f', 6), QString::number(latValue, 'f', 6));
    }
}

void frmDeviceGps::receiveDataFromJs(const QString &type, const QVariant &data)
{
    //qDebug() << type << data;
    QString result = data.toString();
    if (type == "point") {
        //演示如何從滑鼠點選處獲取經緯度座標
        QString lnglat = WebHelper::getLngLat2(result);
        //AppEvent::Instance()->slot_receiveLngLat(lnglat);
        qDebug() << TIMEMS << lnglat;
    }
}

void frmDeviceGps::moveDevice(int id, const QString &lng, const QString &lat)
{
    if (listPoints.count() == 0) {
        return;
    }

    //先刪除上一次新增的線條,不然會重疊不好看
    map->runJs("deleteOverlay('Polyline')");

    //新增軌跡線條
    QString point = QString("%1,%2").arg(lng).arg(lat);
    QString name = AppData::GpsDeviceNames.at(id);
    QString js = QString("moveMarker('%1', '%2')").arg(name).arg(point);
    map->runJs(js);

    listPoints[id] << point;
    for (int i = 0; i < AppData::GpsDeviceCount; i++) {
        QString points = listPoints.at(i).join("|");
        QString color = AppData::GpsDeviceColors.at(i);
        QString js = QString("addPolyline('%1', '%2', 3, 1)").arg(points).arg(color);
        map->runJs(js);
    }
}