现在每个大公司都有自己的一套全局质量监控的东西，见过沈灿他们公司的大屏幕很酷，很牛逼。 也用过腾讯某部门websocket做的实时推送全国节点阀值并报警的项目，也从朋友那得到淘宝运维体系的在线热点监控的画面。。。。
我这里就简单实现一个全局的大屏幕监控。
这东西一般是好几个人一块搞的，有前端的，有后端的，最少也要两个人。 条件有限，只能是对付了。
推荐一个js http://www.oschina.net/p/echarts
对于前端，我自己想到了两种的方案：
一种是用js联合html5的新东西 svg 实现的地图及热点的展现。
另一种就是用百度地图的api，加上红红的标注。。。
下图是我一个项目中的测试截图。
我们还需要把各个节点，用文字描述下。
对于这些数据，我们可以从前端搞，也可以用python的模版搞定。
推荐大家用tornado ，他的websocket算是高度集成，类似node.js和socket.io的样子。 以前我用flask框架的时候，想做实时的监控，需要重新配置gevent。gevent有个websocket的核心。
用图表描述下
用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
|
百度地图给开发者提供的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
|
<img style=
"margin:20px"
width=
"280"
height=
"140"
src="http:
//api.map.baidu.com/staticimage?
width=
280
&height=
140
&zoom=
11
&scale=
2
" />
|
关于后端的数据，那就灵活了 ~
我们可以用saltstack做监控，取到的数据，插入到数据库里面，然后页面调取后端接口渲染页面。做成实时的可以js控制刷新时间。
当然也可以从cacti，zabbix里面取数据再渲染页面。
后端的做法是多种多样的。
总结，前端后端实现过程，大家了解一二了吧，我想大家可以搞起啦~
本文转自 rfyiamcool 51CTO博客，原文链接：http://blog.51cto.com/rfyiamcool/1302398，如需转载请自行联系原作者
