一、前言

echart本身是沒有提供省市區域輪廓圖的，需要引入外部的js檔案才能繪製，為了拿到全國各省市的對應輪廓圖js檔案，特意去網上搜索了很多的相關文章並理解，下載到了對應的省市區域的json資料，然後根據js的規則特意寫了個類專門用來轉換json資料到js檔案，然後生成了所有省市區域的js檔案，在echart中用到哪個只需要那個的js檔案即可，這些js檔案在那個下載地址中都有的，至於這些區域的輪廓圖其實是一些亂七八糟的符號具體什麼含義我也沒有搞懂，你說是base64編碼吧仔細看也不像，管他呢，是正確的的能用就行，具體的原理估計也要研究echart的原始碼才行。

省市區域圖也可以叫省市輪廓圖，就是將每個省份、市區的邊界區域變成輪廓展示，只是個大概的輪廓，和真是的地圖基本一致，畢竟都是一個個點堆起來的，可能會有很小很小的誤差，之前做大屏系統中間那個中國地圖的時候，客戶千方百計交代清楚，千萬要注意有九段線，不然在展會上被別人看到如果連九段線都沒有的話會被人罵死，可能在部分早期的資料由於不是很完善所以未必有，後期的最新的地圖資料都是有的，包括輪廓圖資料。

之前的閃爍點圖或者遷徙圖也好，都是用中國地圖輪廓圖作為背景的，可以滑鼠縮放，其實svg也可以做到類似的效果，類似於向量圖，除了中國地圖以外，其實還可以有世界地圖，至於世界其他國家的地圖估計要自己通過其他方式轉換慢慢得到了，按道理來說應該有不少的應用軟體給國外客戶用的話會有。

二、功能特點

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/

四、效果圖

五、相關程式碼

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;
}