Comprehensive Application Of Baidu Map With Qt Coding (Online + Offline + Regional)

Alles rund um die Programmierung mit Qt
Antworten
vivipoe
Beiträge: 53
Registriert: 28. April 2021 09:32

Comprehensive Application Of Baidu Map With Qt Coding (Online + Offline + Regional)

Beitrag von vivipoe »

Ⅰ. Preface

At present in many applications, it will provide a map module, associated with the map application and the app is very much, the most widely used as navigation, map basically is divided into two kinds of online and offline, online generally is real-time, data is the latest, very accurate fast route, the disadvantage is that cost flow, always need to send and receive data, but offline needs to first download the map package and the corresponding file to the local, directly read the local map data for interaction.
Through Qt has done a number of commercial projects, including involves loading distribution map is used to display equipment. The previous online map, through a web of interaction to get and send the data. The need for offline maps has increased in recent years, the core of offline map is a map packet, also known as a tile map, it needs to be downloaded to local use through the downloader, at present, there are a lot of companies specializing in this offline tile map download, most of them are charged.
More and more map services use tile technology, such as the implementation of the release of the world map service in China uses the map tile technology.In fact, the map tile after slicing is a raster image without positioning information. However, the specific positioning position can be calculated after the slicing applies the relevant slicing algorithm.For example, the WGS84 geodetic coordinate system is used as the spatial reference to slice the map, and a certain slicing algorithm is adopted, for example, the map tile is formed by dividing the steps of latitude and longitude. When a specific place needs to be located, the specific position can be calculated according to the steps of latitude and longitude, so as to achieve the function of positioning.
Recently, I took time to repackage the commonly used regional map and map function modules in the big-screen system, making it support online and offline two modes, and support WebKit, WebEngine, IE three ways, support flicker point map, migration map, regional map, dashboard, and interactive functions.

Ⅱ. Features

Echarts map encapsulation class’s features:

1.Support scintillation point map, migration map, area map, dashboard, etc.

2.Support setting title, prompt message, background color, text color, line color, area color and other colors.

3.Support to set the city name, value, longitude and latitude collection.

4.Support to set the zoom of the map, whether to allow mouse wheel zoom.

5.Built-in world map, national map, province map, regional map, can be accurate to the county, all maps are offline.

6.Built-in function of JSON data files to JS files of various provinces and cities, which can update data in real time, and support single file conversion and one-key conversion of all files.

7.Built-in function to get all the names and longitude and latitude information sets of the region from JSON file or JS file. You can get the information for display through this method.

8.Based on the browser component display map, the demo supports WebKit, WebEngine, IE three ways to load the page.

9.Expansion is strong, you can create all kinds of exquisite echarts components by yourself, to make a superior effect.

10.The built-in dashboard component provides interactive functionality, and the corresponding code is included in the demo.

11.Function interface as a class, friendly and unified, easy to use.

12.Support any Qt version, any system, any compiler.

Baidu map encapsulation class’s features:

Special note: from June 2019, the official start to charge for some functions, such as theme style, query route, etc., you need to go to the background to recharge the corresponding secret key to use.

1.Both online map and offline map modes are supported.

2.Support WebKit kernel, WebEngine kernel, IE kernel.

3.Support to set multiple annotation points, including name, address, latitude and longitude.

4.Support to set whether the map can be clicked, dragged, mouse wheel zoom.

5.Support setting protocol version, secret key, theme style, central coordinates, central city, geocoding location, etc.

6.Support setting map zoom scale and level, thumbnail, scale, traffic information and other controls visible.

7.Supports map interaction, such as mouse presses to obtain latitude and longitude of the corresponding location.

8.Support query route, can set the starting point location, destination location, route mode, route mode, route scheme (minimum time, minimum transfer, minimum walking, no subway, shortest distance, avoid the highway).

9.Support display dot, line and surface tools, can be directly on the map line, dot, rectangle, circle, etc.

10.Support setting administrative division, specify a city area drawing layer, online map automatically output administrative division boundary points collection to JS file for offline map use.

11.Support adding multiple coverings. Support points, polylines, polygons, rectangles, circles, arcs, point aggregation, etc.

12.Function interface as a class, friendly and unified, easy to use.

13.Support any Qt version, any system, any compiler.

Ⅲ. Renderings

Bild

https://youtu.be/hwtc-Io5fA4

Ⅳ. Core Code

Code: Alles auswählen

void frmEcharts::loadMap()
{
    timer->stop();

    Echarts::Instance()->reset();
    Echarts::Instance()->setHeight(ui->widget->height());

    QStringList cityName, cityValue, cityPoint;
    cityName << "上海" << "北京" << "成都" << "武汉" << "厦门" << "广州";
    cityPoint << "121.48,31.22" << "116.46,39.92" << "104.06,30.67" << "114.31,30.52" << "118.1,24.46" << "113.23,23.16";

    Echarts::Instance()->setCityName(cityName);
    Echarts::Instance()->setCityPoint(cityPoint);
    Echarts::Instance()->setZoom(1.0);
    //全国地图是 china 世界地图可以换成 world
    Echarts::Instance()->setMapJsName("china");
    Echarts::Instance()->setMapAreaName("china");

    QString text = ui->cboxType->currentText();
    if (text == "闪烁点图") {
        cityValue << "250" << "220" << "150" << "180" << "140" << "170";
        Echarts::Instance()->setCityValue(cityValue);
    } else if (text == "迁徙图") {
        cityValue << "1" << "0" << "0" << "0" << "0" << "0";
        Echarts::Instance()->setCityValue(cityValue);
    } else if (text == "仪表盘") {

    } else if (text == "区域地图") {
        QStringList cityName, cityValue, cityPoint;
        QString dirName = ui->cboxDir->currentText();
        QString areaName = ui->cboxJson->currentText();
        QString jsName = dirName + "/" + areaName;

#if 1
        //根据文件获取名称+经纬度集合
        QString jsonFile = QString("%1/areajson/%2/%3.json").arg(AppPath).arg(dirName).arg(areaName);
        QString jsFile = QString("%1/areajs/%2/%3.js").arg(AppPath).arg(dirName).arg(areaName);
        //QStringList infos = EchartJs::getInfoFromJson(jsonFile);
        QStringList infos = EchartJs::getInfoFromJs(jsFile);
        foreach (QString info, infos) {
            QStringList list = info.split("|");
            cityName << list.at(0);
            cityValue << QString("%1").arg((qrand() % 100) + 100);
            cityPoint << list.at(1);
        }
#else
        //固定写死
        if (areaName == "上海") {
            cityName << "浦东新区" << "闵行区" << "金山区" << "奉贤区" << "嘉定区";
            cityValue << "250" << "100" << "200" << "150" << "220";
            cityPoint << "121.567706,31.245944" << "121.375972,31.111658" << "121.330736,30.724697" << "121.458472,30.912345" << "121.250333,31.383524";
        }
#endif

        Echarts::Instance()->setCityName(cityName);
        Echarts::Instance()->setCityValue(cityValue);
        Echarts::Instance()->setCityPoint(cityPoint);
        Echarts::Instance()->setMapJsName(jsName);
        Echarts::Instance()->setMapAreaName(areaName);
    } else if (text == "世界地图") {
        QStringList cityName, cityValue, cityPoint;
        Echarts::Instance()->setCityName(cityName);
        Echarts::Instance()->setCityValue(cityValue);
        Echarts::Instance()->setCityPoint(cityPoint);
        Echarts::Instance()->setMapJsName("world");
        Echarts::Instance()->setMapAreaName("world");
    }

    loadMap(ui->cboxType->currentIndex());
}

void frmEcharts::loadMap(int type)
{
    QString content;
    QString fileName = QString("%1/map_echarts.html").arg(AppPath);
    QString url = "file:///" + fileName;

    //如果采用加载内容方式则需要先设置不存储文件
    //在linux上需要用load的方式加载
#ifdef Q_OS_WIN
    Echarts::Instance()->setSaveFile(false);
#else
    Echarts::Instance()->setSaveFile(true);
#endif

    Echarts::Instance()->setFileName(fileName);
    if (type == 1) {
        content = Echarts::Instance()->newChartMove("上海");
    } else if (type == 2) {
        content = Echarts::Instance()->newChartGauge("完成率", 65);
    } else {
        content = Echarts::Instance()->newChartPoint();
    }

    //下面为两种方式加载网页,如果内容为空则加载网页文件否则加载内容
    //一般为了保密建议加载内容,这样看不到生成的网页文件
    if (Echarts::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/").arg(AppPath));
#ifdef webkit
        webView->setHtml(content, baseUrl);
#elif webengine
        webView->setHtml(content, baseUrl);
#endif
    }
}

void frmEcharts::on_btnSaveJs_clicked()
{
    QString dirName = ui->cboxDir->currentText();
    QString cityName = ui->cboxJson->currentText();
    QString jsonFile = QString("%1/areajson/%2/%3.json").arg(AppPath).arg(dirName).arg(cityName);
    QString jsFile = QString("%1/areajs/%2/%3.js").arg(AppPath).arg(dirName).arg(cityName);
    EchartJs::saveJs(jsonFile, jsFile, cityName);
}

void frmEcharts::on_btnSaveAll_clicked()
{
    ui->btnSaveJs->setEnabled(false);
    ui->btnSaveAll->setEnabled(false);
    qApp->processEvents();

    QString dirPath = QString("%1/areajson").arg(AppPath);
    QDir dir(dirPath);
    if (dir.exists()) {
        QStringList dirNames = dir.entryList(QDir::Dirs | QDir::NoSymLinks | QDir::NoDotAndDotDot);
        ui->progressBar->setValue(0);
        ui->progressBar->setRange(0, dirNames.count());
        foreach (QString dirName, dirNames) {
            QString strPath = QString("%1/areajson/%2").arg(AppPath).arg(dirName);
            QDir path(strPath);
            if (path.exists()) {
                QStringList fileNames = path.entryList(QDir::Files | QDir::NoSymLinks | QDir::NoDotAndDotDot);
                foreach (QString fileName, fileNames) {
                    fileName = fileName.replace(".json", "");
                    QString jsonFile = QString("%1/areajson/%2/%3.json").arg(AppPath).arg(dirName).arg(fileName);
                    QString jsFile = QString("%1/areajs/%2/%3.js").arg(AppPath).arg(dirName).arg(fileName);
                    EchartJs::saveJs(jsonFile, jsFile, fileName);
                }
            }

            ui->progressBar->setValue(ui->progressBar->value() + 1);
        }
    }

    ui->btnSaveJs->setEnabled(true);
    ui->btnSaveAll->setEnabled(true);
}

void frmEcharts::on_cboxType_currentIndexChanged(const QString &arg1)
{
    if (isVisible()) {
        this->loadMap();
    }
}

void frmEcharts::on_cboxDir_currentIndexChanged(const QString &arg1)
{
    //取出目录下的所有文件名称作为市
    ui->cboxJson->clear();
    QString dirPath = QString("%1/areajson/%2").arg(AppPath).arg(arg1);
    QDir dir(dirPath);
    if (dir.exists()) {
        QStringList fileNames = dir.entryList(QDir::Files | QDir::NoSymLinks | QDir::NoDotAndDotDot);
        foreach (QString fileName, fileNames) {
            fileName = fileName.replace(".json", "");
            ui->cboxJson->addItem(fileName);
        }
    }
}

void frmEcharts::on_cboxJson_currentIndexChanged(const QString &arg1)
{
    if (isVisible() && ui->cboxType->currentText() == "区域地图") {
        this->loadMap();
    }
}

void frmEcharts::on_horizontalSlider_valueChanged(int value)
{
    if (isVisible() && ui->cboxType->currentText() == "仪表盘") {
        QString js = QString("setGaugeValue(%1)").arg(value);
#ifdef webkit
        webView->page()->mainFrame()->evaluateJavaScript(js);
#elif webengine
        webView->page()->runJavaScript(js);
#endif
    }
}

Ⅴ. Demo


1.download URL for dropbox:
https://www.dropbox.com/sh/n58ucs57pscp ... Drj1a?dl=0
2.download URL for box:
https://app.box.com/s/x48a7ttpk667afqqdk7t1fqok4fmvmyv

If you want English Version, please contact me.
email: vivipoe2010@hotmail.com
Antworten