如何開發(fā)基于HTML5網(wǎng)絡(luò)拓?fù)鋱D應(yīng)用

小編給大家分享一下如何開發(fā)基于HTML5網(wǎng)絡(luò)拓?fù)鋱D應(yīng)用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

該例子展示了如何構(gòu)建兩個(gè)節(jié)點(diǎn)、一條連線、以及一個(gè) Group 的組合效果?？梢匀菀桌斫鈽?gòu)建一個(gè)拓?fù)浣缑婊旧暇褪遣僮?DataModel 數(shù)據(jù)模型，以下為構(gòu)建上圖界面效果的模型代碼部分：

// 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);

當(dāng)然真實(shí)的系統(tǒng)不會(huì)像上述代碼這樣寫死內(nèi)容，一般用戶通過后臺(tái)數(shù)據(jù)查詢，然后再根據(jù)后臺(tái)數(shù)據(jù)動(dòng)態(tài)創(chuàng)建拓?fù)涔?jié)點(diǎn)、連線、組、子網(wǎng)等圖元內(nèi)容，并填充如圖元名字、連線顏色、告警內(nèi)容等屬性信息，而因?yàn)?HT 技術(shù)基于 HTML5，因此大部分工業(yè)控制 Web SCADA 客戶都采用了 WebSocket 的實(shí)時(shí)通訊方式，關(guān)于 WebSocket 的使用可參考這篇文章：3D拓?fù)渥詣?dòng)布局之Node.js篇

構(gòu)建模型就是上面這樣簡(jiǎn)單，剩下工作就是設(shè)置相應(yīng)的圖元屬性達(dá)到信息展示和美觀的效果，關(guān)于圖元甚至整體 HT 圖形組件風(fēng)格的自定義，可參考《HT for Web 風(fēng)格手冊(cè)》，這里我舉個(gè)簡(jiǎn)單的小細(xì)節(jié)，可人有人留意到上面設(shè)置 label 的代碼有點(diǎn)特別：

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

這里 \n 顧名思義就是換行的意思，當(dāng)然除了換行外，還可以有垂直布局等等花哨的展示形態(tài)，可參考《網(wǎng)絡(luò)拓?fù)鋱D上文本的巧妙應(yīng)用》一文的介紹：

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});

當(dāng)然也可以達(dá)到動(dòng)態(tài)旋轉(zhuǎn)文字的效果，拖拽下面這個(gè)紅色圓球達(dá)到動(dòng)態(tài)旋轉(zhuǎn)文字的效果：

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

構(gòu)建完圖元連線關(guān)系，設(shè)置完圖元風(fēng)格屬性，接下來主要就是圖元擺放問題，對(duì)于工業(yè)控制領(lǐng)域的圖元擺放一般是手工進(jìn)行，所以 Web SCADA 工業(yè)控制領(lǐng)域一般會(huì)構(gòu)建一套針對(duì)自己產(chǎn)品的 HMI 人機(jī)界面繪圖工具：

對(duì)于電信網(wǎng)管拓?fù)鋺?yīng)用，由于網(wǎng)絡(luò)拓?fù)鋱D元數(shù)據(jù)量往往常常非常巨大，雖然 HT 拓?fù)鋱D組件性能非常強(qiáng)勁，承載好幾甚至上十萬(wàn)的網(wǎng)絡(luò)拓?fù)涫噶繄D元都毫無(wú)壓力，但如何實(shí)現(xiàn)這么多數(shù)據(jù)量圖元的布局是個(gè)問題，如果是規(guī)規(guī)矩矩的自然比較容易，寫兩個(gè) for 循環(huán)就能實(shí)現(xiàn)網(wǎng)格布局，這種例子一般用于能源行業(yè)控制系統(tǒng)，通過采用 HT 的矢量格式，可動(dòng)態(tài)控制風(fēng)機(jī)的轉(zhuǎn)速、顏色等參數(shù)，來直觀形象的表達(dá)該風(fēng)機(jī)的運(yùn)行狀態(tài)。

這個(gè)例并沒有針對(duì)手機(jī)做特別優(yōu)化，但我特意用 iOS Safari 來跑，不得不說 Safari 10 還是配得上 HT 的這個(gè)例子，蘋果還是不斷努力在提升 HTML5 在其產(chǎn)品線中的性能，并且 Safari 10 號(hào)稱已經(jīng) 100% 支持 ES6 標(biāo)準(zhǔn)了，

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

不過更多的電信網(wǎng)管拓?fù)鋱D應(yīng)用會(huì)采用 HT 的自動(dòng)布局功能，利用好自動(dòng)布局功能可以大大減少項(xiàng)目上線的實(shí)施工作量，且電信設(shè)備往往需要自動(dòng)發(fā)現(xiàn)動(dòng)態(tài)變化，幾乎無(wú)法用手工完成這些事情。如果結(jié)合華為任正非老大最近的言論，可以想象將來華為的電信網(wǎng)管拓?fù)?，?yīng)該利用其獨(dú)有的行業(yè)網(wǎng)絡(luò)數(shù)據(jù)，依靠人工智能來提供自動(dòng)布局算法布局，好吧，我扯遠(yuǎn)了剎車回主題。

其實(shí)自動(dòng)布局無(wú)法提供算法進(jìn)行圖元擺放，以便達(dá)到業(yè)務(wù)展示的需求，這兩篇文章詳細(xì)分析了如果自定義出總線和沿著任意曲線布局的案例：

以上創(chuàng)建網(wǎng)絡(luò)圖元、設(shè)置圖元連線關(guān)系、配置圖元風(fēng)格屬性、進(jìn)行圖元布局?jǐn)[放就是構(gòu)建拓?fù)鋱D的幾個(gè)基本步驟，其實(shí)熟悉了 HT 分分鐘就能開發(fā)出像模像樣的 HTML5 網(wǎng)絡(luò)拓?fù)鋱D應(yīng)用，用戶可將整個(gè)拓?fù)鋱D序列化成字符串的 JSON 格式內(nèi)容，這樣你可以保存到后臺(tái)數(shù)據(jù)庫(kù)，或者后臺(tái)服務(wù)器文件皆可，HT 只是前端的圖形組件，不介入后臺(tái)通訊和存儲(chǔ)，反正控制權(quán)在你，不收任何約束，可以隨心所欲的設(shè)計(jì)你的網(wǎng)絡(luò)拓?fù)鋱D整體系統(tǒng)架構(gòu)。

以上是“如何開發(fā)基于HTML5網(wǎng)絡(luò)拓?fù)鋱D應(yīng)用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！