如何開發基于HTML5網絡拓撲圖應用

小編給大家分享一下如何開發基于HTML5網絡拓撲圖應用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

該例子展示了如何構建兩個節點、一條連線、以及一個 Group 的組合效果?？梢匀菀桌斫鈽嫿ㄒ粋€拓撲界面基本上就是操作 DataModel 數據模型，以下為構建上圖界面效果的模型代碼部分：

// init data modelhello = new ht.Node();
hello.setPosition(60, 140);             
hello.setName('Hello');
hello.setStyle('note', 'I love HT');
hello.setStyle('note.background', '#FFA000');
dataModel.add(hello);

world = new ht.Node();
world.setPosition(260, 80);
world.setName('World');
world.setStyle('note', 'HT for your imagination');
world.setStyle('note.expanded', false);  
world.setStyle('border.color', 'red');                
dataModel.add(world);

edge = new ht.Edge(hello, world);
edge.setName('Hello World\nwww.hightopo.com');
edge.setStyle('label.color', 'white');
edge.setStyle('label.background', '#3498DB');                
dataModel.add(edge);  

group = new ht.Group();
group.setName('HT for Web ' + ht.Default.getVersion());
group.addChild(hello);
group.addChild(world);
group.addChild(edge);
dataModel.add(group);

當然真實的系統不會像上述代碼這樣寫死內容，一般用戶通過后臺數據查詢，然后再根據后臺數據動態創建拓撲節點、連線、組、子網等圖元內容，并填充如圖元名字、連線顏色、告警內容等屬性信息，而因為 HT 技術基于 HTML5，因此大部分工業控制 Web SCADA 客戶都采用了 WebSocket 的實時通訊方式，關于 WebSocket 的使用可參考這篇文章：3D拓撲自動布局之Node.js篇

構建模型就是上面這樣簡單，剩下工作就是設置相應的圖元屬性達到信息展示和美觀的效果，關于圖元甚至整體 HT 圖形組件風格的自定義，可參考《HT for Web 風格手冊》，這里我舉個簡單的小細節，可人有人留意到上面設置 label 的代碼有點特別：

edge.setName('Hello World\nwww.hightopo.com');

這里 \n 顧名思義就是換行的意思，當然除了換行外，還可以有垂直布局等等花哨的展示形態，可參考《網絡拓撲圖上文本的巧妙應用》一文的介紹：

var list = [], node;for (var i = 0; i < 4; i++) {
    node = new ht.Node();
    node.setImage('station');
    node.p(100 + i * 100, 100);
    dm.add(node);

    list.push(node);
}
node = list[0];
node.s({    
'label': '廈門',    
'label.font': '22px arial, sans-serif',    
'label2': 'Xiamen',    
'label2.position': 31,    
'label2.offset.y': 23});

node = list[1];
node.s({    
'label': '圖\n撲',    
'label.position': 14,    
'label.font': '22px arial, sans-serif',    
'label2': 'Hightopo',    
'label2.position': 14,    
'label2.offset.x': -7,    
'label2.rotation': -Math.PI / 2});

node = list[2];
node.s({    
'label': '上\n海',   
'label.position': 20,    
'label.font': '22px arial, sans-serif',    
'label2': 'Shanghai',    
'label2.position': 20,    
'label2.offset.x': 6,    
'label2.rotation': -Math.PI / 2});

node = list[3];
node.s({    
'label': '北京',    
'label.position': 3,    
'label.font': '22px arial, sans-serif',    
'label2': 'Beijing',    
'label2.position': 3,    
'label2.offset.y': -23});

當然也可以達到動態旋轉文字的效果，拖拽下面這個紅色圓球達到動態旋轉文字的效果：

從上面例子可以參考光光一個文字還有設置顏色、背景、字體、最大長度等等參數，如果加上 Position 的布局 3D 的布局那幾乎可以基于文字獨立寫篇文章了，這里就不一而足了，有興趣的可以玩玩位置手冊的各種例子：

構建完圖元連線關系，設置完圖元風格屬性，接下來主要就是圖元擺放問題，對于工業控制領域的圖元擺放一般是手工進行，所以 Web SCADA 工業控制領域一般會構建一套針對自己產品的 HMI 人機界面繪圖工具：

對于電信網管拓撲應用，由于網絡拓撲圖元數據量往往常常非常巨大，雖然 HT 拓撲圖組件性能非常強勁，承載好幾甚至上十萬的網絡拓撲矢量圖元都毫無壓力，但如何實現這么多數據量圖元的布局是個問題，如果是規規矩矩的自然比較容易，寫兩個 for 循環就能實現網格布局，這種例子一般用于能源行業控制系統，通過采用 HT 的矢量格式，可動態控制風機的轉速、顏色等參數，來直觀形象的表達該風機的運行狀態。

這個例并沒有針對手機做特別優化，但我特意用 iOS Safari 來跑，不得不說 Safari 10 還是配得上 HT 的這個例子，蘋果還是不斷努力在提升 HTML5 在其產品線中的性能，并且 Safari 10 號稱已經 100% 支持 ES6 標準了，

The ECMAScript 2015 standard, also known as ES6, is completely supported, bringing this major JavaScript evolution to Safari on macOS and iOS.

不過更多的電信網管拓撲圖應用會采用 HT 的自動布局功能，利用好自動布局功能可以大大減少項目上線的實施工作量，且電信設備往往需要自動發現動態變化，幾乎無法用手工完成這些事情。如果結合華為任正非老大最近的言論，可以想象將來華為的電信網管拓撲，應該利用其獨有的行業網絡數據，依靠人工智能來提供自動布局算法布局，好吧，我扯遠了剎車回主題。

其實自動布局無法提供算法進行圖元擺放，以便達到業務展示的需求，這兩篇文章詳細分析了如果自定義出總線和沿著任意曲線布局的案例：

以上創建網絡圖元、設置圖元連線關系、配置圖元風格屬性、進行圖元布局擺放就是構建拓撲圖的幾個基本步驟，其實熟悉了 HT 分分鐘就能開發出像模像樣的 HTML5 網絡拓撲圖應用，用戶可將整個拓撲圖序列化成字符串的 JSON 格式內容，這樣你可以保存到后臺數據庫，或者后臺服務器文件皆可，HT 只是前端的圖形組件，不介入后臺通訊和存儲，反正控制權在你，不收任何約束，可以隨心所欲的設計你的網絡拓撲圖整體系統架構。

以上是“如何開發基于HTML5網絡拓撲圖應用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！