Grafana worldmap-panel 使用总结 with InfluxDB

worldmap 介绍

Grafana想必大家都非常熟悉了，不熟悉的话可以到 https://grafana.com/ 详细了解。
Grafana提供了很多插件，极大的方便了我们的开发工作。其中worldmap panel是一个重要的插件。
网址如下：
https://grafana.com/grafana/plugins/grafana-worldmap-panel
worldmap 提供了一个世界地图供我们使用，可以在地图上指定地点画一个圆周并显示相应的数据信息。
它支持各种主流数据源，例如Prometheus, InfluxDB, Graphite, Elasticsearch, MySQL etc.
它可以支持 Time Series 和 Table 两种数据格式。
本文主要总结worldmap与InfluxDB使用Table数据格式时的用法，Time Series 类似的，以后再分享。

如何使用

influxDB 表定义

基于influxDB, 首先要有表，假设表的数据结构如下：
name: execlocGeo
time distance geohash host latitude location longitude

---

1585706674000000000 19.1 wwmm5ck zd 36.042175 zhongde 120.054013

Geohash：经纬度的geohash值
Distance: 表示安全距离
Location：地点的名称

Geohash 值怎么计算

查询一个地址的geohash值和经纬度坐标
http://www.geohash.cn/ 基于高德地图

根据经纬度查询在不同地图上的位置并生成geohash
http://geohash.org/ 支持openstreetmap, google maps

注意，geohash.cn上查询到的geohash值在openstreetmap 上显示时，位置会有误差，需要对着地图使用临近区域的geohash值代替，手动调吧。所以，最好还是使用geohash.org.

Worldmap panel 配置 query 数据

需要用到的数据是geohash, distance, location, 可以给他们设置别名。
如果设置了别名，后面的配置中就要使用别名。
特别注意的，要使用table format， 所有要使用的字段要写在一个查询语句中。

具体的配置如下图：

视图配置

Center表示视图中央显示的地图地点，可以手动输入经纬度坐标
Location Data 选择 table
FieldMapping 字段根据query数据时指定的名称填写。下面是例子：

到此，配置差不多就完成了，看一下效果：

Trouble shooting

第一次使用时，总会遇到各种各样的问题，这里列举一个

worldmap-panel出现无法显示地图或者加载非常缓慢

这是因为 worldmap使用的地图是openstreetmap, 默认使用的是下面网址：
https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png
https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png

可以替换为CartoDB basemaps。如何替换呢？

首先确认本地网络能正常访问, 输入网址 http://bl.ocks.org/Xatpy/raw/854297419bd7eb3421d0/
如果能正常显示地图，说明可以使用。

然后到grafana的plugins 目录，默认是/var/lib/grafana/plugins/grafana-worldmap-panel
先备份三个文件，然后修改
grafana-worldmap-panel\src\worldmap.ts
grafana-worldmap-panel\dist\module.js
grafana-worldmap-panel\dist\module.js.map

注意，这三个文件都要修改.

将：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
将：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: sudo systemctl restart grafana-server