Qt編寫地圖綜合應用34-生成區域輪廓圖
阿新 • • 發佈:2021-12-17
一、前言
區域輪廓圖的前提是,如何拿到這些輪廓的js檔案,網路上其實能夠找到各省市的輪廓的json資料,這些json資料對應內容是各種邊界的一些類似 @@CGIUCACAAAAA@Q@ 字元的東西,每段這種字元表示一個特定的封閉區域,具體的這種字元的規則含義,搜尋了一圈沒有找到答案,莫非是可以將這些字元轉換成經緯度座標集合,然後再對這些經緯度座標集合繪製封閉區域圖形Polygon。
光有這些json資料還是不夠的,還需要轉換成js檔案,這樣echart庫才能正常識別和使用,網上也有這個通用的js函式框架,只需要呼叫echarts.registerMap方法註冊對應區域的json資料就行,於是按照這個規則,做了個一鍵生成所有js檔案的功能。
二、功能特點
- 同時支援閃爍點圖、遷徙圖、區域地圖、世界地圖、儀表盤等。
- 可以設定標題、提示資訊、背景顏色、文字顏色、線條顏色、區域顏色等各種顏色。
- 可設定城市的名稱、值、經緯度 集合。
- 可設定地圖的放大倍數、是否允許滑鼠滾輪縮放。
- 內建世界地圖、全國地圖、省份地圖、地區地圖,可以精確到縣,所有地圖全部離線使用。
- 內建了各省市json資料檔案轉js檔案功能,如有資料更新自行轉換即可,支援單個檔案轉換和一鍵轉換所有檔案。
- 內建了從json檔案或者js檔案獲取該區域的所有名稱和經緯度資訊集合的功能,可以通過該方法獲取到資訊用來顯示。
- 依賴瀏覽器元件顯示地圖,提供的demo支援webkit/webengine/miniblink/ie 多種方式載入網頁。
- 採用miniblink瀏覽器核心打通了Qt5.6及後續版本+mingw編譯器缺少瀏覽器模組的遺憾,使得整個專案支援所有Qt版本,親測4.7到6.2等任意版本。
- 閃爍點遷徙圖等設定的點支援單獨設定顏色。
- 提供介面直接獲取點選的點相關資訊,方便程式聯動處理。
- 拓展性極強,可以依葫蘆畫瓢自行增加各種精美的echarts元件,做出牛逼的效果。
- 內建的儀表盤元件提供互動功能,demo演示中包含了對應的程式碼。
- 函式介面友好和統一,使用簡單方便,就一個類。
- 支援任意Qt版本、任意系統、任意編譯器。
三、體驗地址
- 體驗地址:https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A
- 國內站點:https://gitee.com/feiyangqingyun
- 國際站點:https://github.com/feiyangqingyun
- 個人主頁:https://blog.csdn.net/feiyangqingyun
- 知乎主頁: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;
}