Qt編寫地圖綜合應用34-生成區域輪廓圖

一、前言

區域輪廓圖的前提是，如何拿到這些輪廓的js文件，網絡上其實能夠找到各省市的輪廓的json數據，這些json數據對應內容是各種邊界的一些類似 @@CGIUCACAAAAA@Q@ 字符的東西，每段這種字符表示一個特定的封閉區域，具體的這種字符的規則含義，搜索了一圈沒有找到答案，莫非是可以將這些字符轉換成經緯度坐標集合，然后再對這些經緯度坐標集合繪制封閉區域圖形Polygon。

光有這些json數據還是不夠的，還需要轉換成js文件，這樣echart庫才能正常識別和使用，網上也有這個通用的js函數框架，只需要調用echarts.registerMap方法注冊對應區域的json數據就行，於是按照這個規則，做了個一鍵生成所有js文件的功能。

二、功能特點

1. 同時支持閃爍點圖、遷徙圖、區域地圖、世界地圖、儀表盤等。
2. 可以設置標題、提示信息、背景顏色、文字顏色、線條顏色、區域顏色等各種顏色。
3. 可設置城市的名稱、值、經緯度 集合。
4. 可設置地圖的放大倍數、是否允許鼠標滾輪縮放。
5. 內置世界地圖、全國地圖、省份地圖、地區地圖，可以精確到縣，所有地圖全部離線使用。
6. 內置了各省市json數據文件轉js文件功能，如有數據更新自行轉換即可，支持單個文件轉換和一鍵轉換所有文件。
7. 內置了從json文件或者js文件獲取該區域的所有名稱和經緯度信息集合的功能，可以通過該方法獲取到信息用來顯示。
8. 依賴瀏覽器組件顯示地圖，提供的demo支持webkit/webengine/miniblink/ie 多種方式加載網頁。
9. 采用miniblink瀏覽器內核打通了Qt5.6及后續版本+mingw編譯器缺少瀏覽器模塊的遺憾，使得整個項目支持所有Qt版本，親測4.7到6.2等任意版本。
10. 閃爍點遷徙圖等設置的點支持單獨設置顏色。
11. 提供接口直接獲取點擊的點相關信息，方便程序聯動處理。
12. 拓展性極強，可以依葫蘆畫瓢自行增加各種精美的echarts組件，做出牛逼的效果。
13. 內置的儀表盤組件提供交互功能，demo演示中包含了對應的代碼。
14. 函數接口友好和統一，使用簡單方便，就一個類。
15. 支持任意Qt版本、任意系統、任意編譯器。

三、體驗地址

1. 體驗地址：https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取碼：o05q 文件名：bin_map.zip
2. 國內站點：https://gitee.com/feiyangqingyun
3. 國際站點：https://github.com/feiyangqingyun
4. 個人主頁：https://blog.csdn.net/feiyangqingyun
5. 知乎主頁：https://www.zhihu.com/people/feiyangqingyun/

四、效果圖

五、相關代碼

#pragma execution_character_set("utf-8")
#include "echartjs.h"
#include "qfile.h"
#include "qfileinfo.h"
#include "qdir.h"
#include "qtextstream.h"
#include "qdatetime.h"
#include "qdebug.h"

#if (QT_VERSION >= QT_VERSION_CHECK(5,0,0))
#include "qjsonarray.h"
#include "qjsondocument.h"
#include "qjsonobject.h"
#include "qjsonvalue.h"
#endif

void EchartJs::saveJs(const QString &jsonFile, const QString &jsFile, const QString &cityName)
{
    QStringList list;

    //頭部固定數據
    list << "(function (root, factory) {";
    list << "    if (typeof define === 'function' && define.amd) {";
    list << "        // AMD. Register as an anonymous module.";
    list << "        define(['exports', 'echarts'], factory);";
    list << "    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {";
    list << "        // CommonJS";
    list << "        factory(exports, require('echarts'));";
    list << "    } else {";
    list << "        // Browser globals";
    list << "        factory({}, root.echarts);";
    list << "    }";
    list << "} (this, function (exports, echarts) {";
    list << "    var log = function (msg) {";
    list << "        if (typeof console !== 'undefined') {";
    list << "            console && console.error && console.error(msg);";
    list << "        }";
    list << "    }";
    list << "    if (!echarts) {";
    list << "        log('ECharts is not Loaded');";
    list << "        return;";
    list << "    }";
    list << "    if (!echarts.registerMap) {";
    list << "        log('ECharts Map is not loaded');";
    list << "        return;";
    list << "    }";

    //從json文件讀取數據
    QString body;
    QFile fileJson(jsonFile);
    if (fileJson.open(QFile::ReadOnly | QFile::Text)) {
        body = fileJson.readAll();
        fileJson.close();
    }

    //加入到數據中
    list << QString("    echarts.registerMap('%1', %2);").arg(cityName).arg(body);
    list << "}));";

    //保存數據到js文件
    QFile fileJs(jsFile);
    //文件夾不存在則先生成文件夾
    QString path = QFileInfo(fileJs).path();
    QDir dir(path);
    if (!dir.exists()) {
        dir.mkdir(path);
    }

    //每次打開都清空
    if (fileJs.open(QFile::WriteOnly | QFile::Truncate)) {
        QTextStream out(&fileJs);
        out << list.join("\r\n");
    }
}

QStringList EchartJs::getInfoFromJson(const QString &jsonFile)
{
    QByteArray data;
    QFile fileJson(jsonFile);
    if (fileJson.open(QFile::ReadOnly | QFile::Text)) {
        data = fileJson.readAll();
        fileJson.close();
    }

    return getInfoFromData(data);
}

QStringList EchartJs::getInfoFromJs(const QString &jsFile)
{
    QByteArray data;
    QFile fileJs(jsFile);
    if (fileJs.open(QFile::ReadOnly | QFile::Text)) {
        while (!fileJs.atEnd()) {
            QByteArray line = fileJs.readLine();
            line = line.trimmed();
            if (line.startsWith("echarts.registerMap")) {
                int index = line.indexOf("{");
                data = line.mid(index, line.length() - index - 2);
            }
        }

        fileJs.close();
    }

    return getInfoFromData(data);
}

QStringList EchartJs::getInfoFromData(const QByteArray &data)
{
    //取出對應的城市名稱和經緯度
    //以下兩種方法測試過解析時間,json大概1ms,字符串分割大概5ms,json方法更快
    QStringList result;
#if (QT_VERSION < QT_VERSION_CHECK(5,0,0))
    //采用字符串分割方法解析
    QString temp = data;
    temp = temp.mid(0, temp.length() - 24);
    QString flag = "properties";
    int count = temp.count();
    for (int i = 0; i < count; ++i) {
        QString str = temp.mid(i, 10);
        if (str != flag) {
            continue;
        }

        str = temp.mid(i, 100);
        str = str.mid(13, str.indexOf("},") - 13);
        str.replace("}", "");
        //到這步數據已經變成 "cp":[121.490317,31.222771],"name":"黃浦區","childNum":1
        //cp name的順序可能不一樣,所以需要分割字符串重新判斷
        QString name, cp;
        QStringList list = str.split(",");
        foreach (QString s, list) {
            if (s.startsWith("\"cp\"")) {
                cp = s.mid(6, s.length());
            } else if (s.startsWith("\"name\"")) {
                name = s.mid(8, s.length());
                name.replace("\"", "");
            } else if (s.startsWith("\"childNum\"")) {

            } else {
                //經緯度會拆分成兩部分,一部分在這里 31.222771]
                cp = QString("%1,%2").arg(cp).arg(s.left(s.length() - 1));
            }
        }

        result << QString("%1|%2").arg(name).arg(cp);
    }
#else
    //采用qt內置的json方法解析
    QJsonParseError error;
    QJsonDocument jsonDoc = QJsonDocument::fromJson(data, &error);
    if (error.error == QJsonParseError::NoError) {
        QJsonObject rootObj = jsonDoc.object();
        //qDebug() << rootObj.keys();
        if (!rootObj.contains("features")) {
            return QStringList();
        }

        QJsonArray features = rootObj.value("features").toArray();
        int count = features.count();
        for (int i = 0; i < count; ++i) {
            QJsonObject subObj = features.at(i).toObject();
            if (!subObj.contains("properties")) {
                continue;
            }

            QJsonObject nodeObj = subObj.value("properties").toObject();
            QJsonArray array = nodeObj.value("cp").toArray();
            QStringList list;
            for (int j = 0; j < array.count(); ++j) {
                list << QString::number(array.at(j).toDouble());
            }

            QString name = nodeObj.value("name").toString();
            QString cp = list.join(",");
            result << QString("%1|%2").arg(name).arg(cp);
        }
    }
#endif
    return result;
}