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

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

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

推荐一个js  

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

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

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

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

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

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

推荐大家用tornado ，他的websocket算是高度集成，类似node.js和socket.io的样子。   以前我用flask框架的时候，想做实时的监控，需要重新配置gevent。gevent有个websocket的核心。

用图表描述下

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

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

源地址 ：

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

http://api.map.baidu.com/staticimage?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里面取数据再渲染页面。

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

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