1. Preface

In many applications, there will be a map module. Map-related applications and apps are also very many. The most widely used are navigation. Maps are basically divided into online and offline. Online maps are generally real-time, data is up-to-date, fast route is accurate, the disadvantage is that it consumes traffic, always needs to send and receive data, and offline needsFirst, download the map package and corresponding files locally, and read the local map data directly to interact. Qt has been used for many business projects, several of which involve loading maps to show the distribution of devices. Previously, online maps were used to get and set up data through web page interaction. In recent years, there has been an increasing need for offline maps. The core of offline maps is map data packages, also known as tile maps, which need to be downloaded locally through downloaders., online check, there are many companies specializing in this offline Tile Map downloader, the vast majority of which are charged. More and more map services use tile technology, for example, sky map service published in China uses map tile technology.In fact, the map tiles behind the slices are raster images and do not have location information, but after using the related slicing algorithm, the specific location can be calculated.For example, using WGS84 geodetic coordinate system as spatial reference, slicing a map, using a slicing algorithm, such as dividing map tiles into equal scales with latitude and longitude steps, when a specific location needs to be located, the specific location can be calculated based on latitude and longitude steps to achieve the function of positioning. Recent vacuuming intentionally re-encapsulated the area maps and map function modules commonly used in large screen systems to support both online and offline modes, as well as webkit, webengine, ie, flicker point maps, migration maps, area maps, dashboards, and interactive functions.

echart dashboard with interactive demo open source address: https://gitee.com/feiyangqingyun/QWidgetDemo https://github.com/feiyangqingyun/QWidgetDemo File name: echartgauge

Experience address: https://gitee.com/feiyangqingyun/QWidgetExe https://github.com/feiyangqingyun/QWidgetExe File name: bin_map.zip

2. Functional features

Features of Echarts Map Encapsulation Class

1. Flash point maps, migration maps, regional maps, dashboards, and so on are also supported.
2. You can set various colors such as title, hint, background, text, line, area, and so on.
3. You can set the name, value, longitude and latitude of a city.
4. You can set the magnification of the map and whether the mouse wheel is allowed to zoom in and out.
5. Built-in world maps, national maps, provincial maps, and regional maps can be accurate to counties, all of which are offline.
6. Built-in provincial json data file to js file function, if there are data updates to convert themselves, support a single file conversion and one-click conversion of all files.
7. Built-in capability to get all the names and latitude and longitude information collections for this area from a json or js file, which can be used to get information for display.
8. Depending on the browser component to display the map, the demo provided supports webkit, webengine, ie to load web pages in three ways.
9. Extensibility is very strong, you can add a variety of beautiful echarts components by yourself to make a cattle-like effect.
10. The built-in dashboard component provides interaction, and the demo demo contains the corresponding code.
11. Function interface is friendly and unified, easy to use, just one class.
12. Supports any Qt version, any system, any compiler.

Features of Baidu Map Encapsulation Function

1. Both online and offline map modes are supported.
2. The webkit, webengine and IE cores are also supported.
3. Support for setting multiple labeling points, including name, address, longitude and latitude.
4. You can set whether the map can be clicked, dragged, and zoomed by the mouse wheel.
5. Protocol versions, keys, theme styles, central coordinates, central cities, geocoded locations, and so on can be set.
6. You can set the scale and level of the map, and the visibility of thumbnails, scales, road information, and other controls.
7. Support map interaction, such as pressing the mouse to get the latitude and longitude of the corresponding location.
8. Query routes are supported, including starting and ending locations, route modes, route modes, route schemes (minimum time, minimum transfer, minimum walking, no metro, minimum distance, avoid high speed).
9. The Points, Lines, and Surfaces tool can be displayed, drawing lines, points, rectangles, circles, and so on directly on the map.
10. You can set up administrative divisions, specify a city area to draw layers, and the online map automatically outputs the boundary points of administrative divisions collected into js files for offline map use.
11. Multiple covers can be added.Supports point, polyline, polygon, rectangle, circle, arc, point aggregation, etc.
12. Function interface is friendly and unified, easy to use, just one class.
13. Supports any Qt version, any system, any compiler.

3. Effect Charts

4. Use Code

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

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

    QStringList cityName, cityValue, cityPoint;
    cityName << "Shanghai" << "Beijing" << "Chengdu" << "Wuhan" << "Xiamen" << "Guangzhou";
    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);
    //National Map is a world map of china that can be replaced by a world map
    Echarts::Instance()->setMapJsName("china");
    Echarts::Instance()->setMapAreaName("china");

    QString text = ui->cboxType->currentText();
    if (text == "Flash Point Map") {
        cityValue << "250" << "220" << "150" << "180" << "140" << "170";
        Echarts::Instance()->setCityValue(cityValue);
    } else if (text == "Migration Map") {
        cityValue << "1" << "0" << "0" << "0" << "0" << "0";
        Echarts::Instance()->setCityValue(cityValue);
    } else if (text == "Dashboard") {

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

#if 1
        //Get name + latitude and longitude set from file
        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
        //Fixed Write Death
        if (areaName == "Shanghai") {
            cityName << "Pudong New Area" << "Minhang District" << "Jinshan District" << "Fengxian District" << "Jiading District";
            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 == "World Map") {
        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;

    //If you load content, you need to set up no file storage first
    //load is required on linux
#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("Shanghai");
    } else if (type == 2) {
        content = Echarts::Instance()->newChartGauge("Completion rate", 65);
    } else {
        content = Echarts::Instance()->newChartPoint();
    }

    //Below are two ways to load a Web page, if the content is empty load the Web page file otherwise load the content
    //Loading content is generally recommended for confidentiality, so that the resulting Web page file is not visible
    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)
{
    //Remove all file names from the directory as cities
    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() == "Area Map") {
        this->loadMap();
    }
}

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