现在每个大公司都有自己的一套全局质量监控的东西，见过沈灿他们公司的大屏幕很酷，很牛逼。 也用过腾讯某部门websocket做的实时推送全国节点阀值并报警的项目，也从朋友那得到淘宝运维体系的在线热点监控的画面。。。。
我这里就简单实现一个全局的大屏幕监控。
这东西一般是好几个人一块搞的，有前端的，有后端的，最少也要两个人。 条件有限，只能是对付了。
对于前端，我自己想到了两种的方案：
一种是用js联合html5的新东西 svg 实现的地图及热点的展现。
另一种就是用百度地图的api，加上红红的标注。
下图是我一个项目中的测试截图。
我们还需要把各个节点，用文字描述下。
对于这些数据，我们可以从前端搞，也可以用python的模版搞定。
085419172.jpg
用图表描述下
085438838.jpg
用js地图插件，好搞点，但是需要js的知识，尤其网上没有很好的demo，对我一个运维来说，很是棘手，但还有ECharts的文档算丰富。
百度地图的话，用这个做监控真是有点搓。热点的体现只能是用标注来做，具体的数据，要在页面的下方做表格。
源地址 ：http://rfyiamcool.blog.51cto.com/1030776/1302398
这是一个画图的接口，通过我访问的地址大家可以看到经纬度和图片的大小，以及热点哈。。。。
1
http://api.map.baidu.com/staticimage?width=1000&height=800¢er=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
083037695.jpg
百度地图给开发者提供的api接口，用了下，非常的全，也很详细。
百度api http://developer.baidu.com/map/static-1.htm
这里的文档已经很好了，教我们该如何的使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
参数名 必选 默认值 描述
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里面 ~
1
2
关于后端的数据，那就灵活了 ~
我们可以用saltstack做监控，取到的数据，插入到数据库里面，然后页面调取后端接口渲染页面。做成实时的可以js控制刷新时间。
当然也可以从cacti，zabbix里面取数据再渲染页面。
后端的做法是多种多样的。
总结，前端后端实现过程，大家了解一二了吧，我想大家可以搞起啦~
阅读(1864) | 评论(0) | 转发(0) |
