## 一、前言
区域轮廓图的前提是，如何拿到这些轮廓的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](https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A) 提取码：o05q 文件名：bin_map.zip
2. 国内站点：[
https://gitee.com/feiyangqingyun](https://gitee.com/feiyangqingyun)
3. 国际站点：[
https://github.com/feiyangqingyun](https://github.com/feiyangqingyun)
4. 个人主页：[
https://blog.csdn.net/feiyangqingyun](https://blog.csdn.net/feiyangqingyun)
5. 知乎主页：[
https://www.zhihu.com/people/feiyangqingyun/](https://www.zhihu.com/people/feiyangqingyun/)
## 四、效果图
## 五、相关代码
```c++
#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;
}
```
