实现大屏幕全国监控各地流量和负载质量

现在每个大公司都有自己的一套全局质量监控的东西，见过沈灿他们公司的大屏幕很酷，很牛逼。也用过腾讯某部门websocket做的实时推送全国节点阀值并报警的项目，也从朋友那得到淘宝运维体系的在线热点监控的画面。。。。

我这里就简单实现一个全局的大屏幕监控。

这东西一般是好几个人一块搞的，有前端的，有后端的，最少也要两个人。条件有限，只能是对付了。

对于前端，我自己想到了两种的方案：

一种是用js联合html5的新东西 svg 实现的地图及热点的展现。

另一种就是用百度地图的api，加上红红的标注。。。

下图是我一个项目中的测试截图。

我们还需要把各个节点，用文字描述下。

对于这些数据，我们可以从前端搞，也可以用python的模版搞定。

用图表描述下

用js地图插件，好搞点，但是需要js的知识，尤其网上没有很好的demo，，对我一个运维来说，很是棘手，但还有ECharts的文档算丰富。

百度地图的话，用这个做监控真是有点搓。热点的体现只能是用标注来做，具体的数据，要在页面的下方做表格。

源地址：

这是一个画图的接口，通过我访问的地址大家可以看到经纬度和图片的大小，以及热点哈。。。。

?width=1000&height=800&center=95.848344,42.777149&zoom=5&markers=121.374594,31.382614|116.885653,37.00429|116.444118,40.123535|106.583167,38.638726|116.149761,34.179652&markerStyles=l,0|l,1|l,2|l,3|l,4

百度地图给开发者提供的api接口，用了下，非常的全，也很详细。

百度api

这里的文档已经很好了，教我们该如何的使用。

参数名必选默认值描述width 否 400 图片宽度。取值范围：(0, 1024]。height 否 300 图片高度。取值范围：(0, 1024]。center 否北京地图中心点位置，参数可以为经纬度坐标或名称。坐标格式：lng<经度>，lat<纬度>，例如116.43213,38.76623。zoom 否 11 地图级别。高清图范围[3, 18]；低清图范围[3,19]dpiType 否 pl 手机屏幕类型。取值范围:{ph：高分屏，非ph：低分屏}，高分屏即调用高清地图，低分屏为普通地图。自V3后废弃。scale 否 null 返回图片大小会根据此标志调整。取值范围为1或2：1表示返回的图片大小为size= width * height;2表示返回图片为(width*2)*(height *2)，且zoom加1注：如果zoom为最大级别，则返回图片为（width*2）*（height*2），zoom不变。bbox 否 null 地图视野范围。格式：minX,minY;maxX,maxY。markers 否 null 标注，可通过经纬度或地址/地名描述；多个标注之间用竖线分隔。markerStyles 否 null 与markers有对应关系。markerStyles可设置默认图标样式和自定义图标样式。其中设置默认图标样式时，可指定的属性包括size,label和color；设置自定义图标时，可指定的属性包括url，注意，设置自定义图标时需要先传-1以此区分默认图标。labels 否 null 标签，可通过经纬度或地址/地名描述；多个标签之间用竖线分隔。坐标格式：lng<经度>，lat<纬度>，例如116.43213,38.76623。labelStyles 否 null 标签样式 content, fontWeight,fontSize,fontColor,bgColor, border。与labels一一对应。paths 否 null 折线，可通过经纬度或地址/地名描述；多个折线用竖线”|”分隔；每条折线的点用分号”;”分隔；点坐标用逗号”,”分隔。坐标格式：lng<经度>，lat<纬度>，例如116.43213,38.76623。pathStyles 否 null 折线样式 color,weight,opacity[,fillColor]。

大家可以把生成的url，放到html里面 ~

关于后端的数据，那就灵活了 ~

我们可以用saltstack做监控，取到的数据，插入到数据库里面，然后页面调取后端接口渲染页面。做成实时的可以js控制刷新时间。

当然也可以从cacti，zabbix里面取数据再渲染页面。

后端的做法是多种多样的。

总结，前端后端实现过程，大家了解一二了吧，我想大家可以搞起啦~

本文出自 “峰云，就她了。” 博客，请务必保留此出处

年轻是胜利的一半。

相关文章：

你感兴趣的文章：

标签云：