實現大螢幕全國監控各地流量和負載質量

我這裡就簡單實現乙個全域性的大螢幕監控。

這東西一般是好幾個人一塊搞的，有前端的，有後端的，最少也要兩個人。條件有限，只能是對付了。

推薦乙個js

對於前端，我自己想到了兩種的方案：

一種是用js聯合html5的新東西 svg 實現的地圖及熱點的展現。

下圖是我乙個專案中的測試截圖。

我們還需要把各個節點，用文字描述下。

對於這些資料，我們可以從前端搞，也可以用python的模版搞定。

推薦大家用tornado ，他的websocket算是高度整合，類似node.js和socket.io的樣子。以前我用flask框架的時候，想做實時的監控，需要重新配置gevent。gevent有個websocket的核心。

用圖表描述下

用js地圖外掛程式，好搞點，但是需要js的知識，尤其網上沒有很好的demo，對我乙個運維來說，很是棘手，但還有echarts的文件算豐富。

源位址：

這是乙個畫圖的介面，通過我訪問的位址大家可以看到經緯度和的大小，以及熱點哈。。。。

這裡的文件已經很好了，教我們該如何的使用。

引數名必選預設值描述

center 否北京地圖中心點位置，引數可以為經緯度座標或名稱。座標格式：lng《經度》，lat《緯度》，例如116.43213,38.76623。

zoom 否 11 地圖級別。高畫質圖範圍[3, 18]；低清圖範圍[3,19]

dpitype 否 pl 手機螢幕型別。取值範圍:，高分屏即呼叫高畫質地圖，低分屏為普通地圖。自v3後廢棄。

1表示返回的大小為size= width * height;

2表示返回為(width*2)*(height *2)，且zoom加1

bbox 否 null 地圖視野範圍。格式：minx,miny;maxx,maxy。

markerstyles 否 null 與markers有對應關係。markerstyles可設定預設圖示樣式和自定義圖示樣式。其中設定預設圖示樣式時，可指定的屬性包括size,label和color；設定自定義圖示時，可指定的屬性包括url，注意，設定自定義圖示時需要先傳-1以此區分預設圖示。

labelstyles 否 null 標籤樣式 content, fontweight,fontsize,fontcolor,bgcolor, border。與labels一一對應。

pathstyles 否 null 折線樣式 color,weight,opacity[,fillcolor]。

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

關於後端的資料，那就靈活了 ~

我們可以用saltstack做監控，取到的資料，插入到資料庫裡面，然後頁面調取後端介面渲染頁面。做成實時的可以js控制重新整理時間。

當然也可以從cacti，zabbix裡面取資料再渲染頁面。

後端的做法是多種多樣的。

總結，前端後端實現過程，大家了解一二了吧，我想大家可以搞起啦~