Granfan安装Wordmap进行展示

背景： 在granfan上添加世界地图的操作步骤，网上的资料很少，公司准备做一个大屏展示，索性就是整一下试试granfan可不可以满足需求。我就是试试，没说一定成功啊！

准备工作

前提服务器上安装好了granfan，以及普罗米修斯。

开始安装Worldmap

在granfan上安装Worldmap插件，安装语句如下：

grafana-cli plugins install grafana-worldmap-panel

结果如图：

配置完成后重启granfan：

service grafana-server restart

下一步在granfan控制面板上进配置


在这里就可以看到我们添加的插件了

有了插件之后，我们现在就需要数据进行处理了，很可惜的是granfan是世界地图，而我想要的却只是中国地图。

这里有问题，就是地图不显示，需要更改配置文件，按照以下步骤解决
进入worldmap的配置文件下：

 cd /var/lib/grafana/plugins/grafana-worldmap-panel

然后在grafana-worldmap-panel这个文件夹下执行替换命令：

sed -i 's/https:\/\/cartodb-basemaps{s}.global.ssl.fastly.net\/light_all\/{z}\/{x}\/{y}.png/http:\/\/{s}.basemaps.cartocdn.com\/light_all\/{z}\/{x}\/{y}.png/' \
grafana-worldmap-panel/src/worldmap.ts \
grafana-worldmap-panel/dist/module.js \
grafana-worldmap-panel/dist/module.js.map

sed -i 's/https:\/\/cartodb-basemaps-{s}.global.ssl.fastly.net\/dark_all\/{z}\/{x}\/{y}.png/http:\/\/{s}.basemaps.cartocdn.com\/dark_all\/{z}\/{x}\/{y}.png/'  \
grafana-worldmap-panel/src/worldmap.ts \
grafana-worldmap-panel/dist/module.js \
grafana-worldmap-panel/dist/module.js.map

最后不要忘记重启服务！！！

这个时候我就在想怎么才可以把我想要的数据在地图上展示出来呢？
这里采用数据源为Mysql作为数据源进行展示：
首先在mysql中创建库：

CREATE TABLE `worldmap_latlng` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `lat` FLOAT NOT NULL,
  `lng` FLOAT NOT NULL,
  `name` VARCHAR(20) NOT NULL,
  `value` FLOAT NOT NULL,
  `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
 ) AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

插入数据：

INSERT INTO `worldmap_latlng`
(`lat`,
 `lng`,
 `name`,
`value`,
`timestamp`)
VALUES
(39.234,
 116.3234,
'Beijing',
1.0,
now());

INSERT INTO `testdb`.`worldmap_latlng`
(`lat`,
 `lng`,
 `name`,
`value`,
`timestamp`)
VALUES
(34.234,
 121.3234,
'Shanghai',
3.0,
now());

INSERT INTO  `worldmap_latlng`
(`lat`,
 `lng`,
 `name`,
`value`,
`timestamp`)
VALUES
(39.234,
 121.3234,
'Tianjing',
5.23,
now());

对于每一条记录，worldmap会基于记录中的经纬度绘制一个特定半径、带标注信息的圆。

其中value表示在地图上显示的这个圈圈的半径多大，value越大，半径越大。
lat和lng是这个记录需要绘制在地图的什么位置。
name是给这个点打上的label,当鼠标移到这个圈圈的时候，就会显示这个字段的值。
timestamp是时间戳，它的类型是timestamp，而不是datetime!!!

参考文章：https://blog.csdn.net/jmh1996/article/details/102476824