HTML5互聯(lián)網(wǎng)：交通信息化

今天小編就為大家?guī)?lái)一篇有關(guān)交通信息化的文章。小編覺(jué)得挺不錯(cuò)的，為此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

近幾年，互聯(lián)網(wǎng)與交通運(yùn)輸?shù)娜诤?，改變了交易模式，影響著運(yùn)輸組織和經(jīng)營(yíng)方式，改變了運(yùn)輸主體的市場(chǎng)結(jié)構(gòu)、模糊了運(yùn)營(yíng)與非營(yíng)運(yùn)的界限，也更好的實(shí)現(xiàn)了交通資源的集約共享，同時(shí)使得更多依靠外力和企業(yè)推動(dòng)交通信息化成為可能?；ヂ?lián)網(wǎng)交通具有巨大的潛力、發(fā)展迅速、生態(tài)浩大，需要政府順勢(shì)而為，緊跟發(fā)展態(tài)勢(shì)，加強(qiáng)引導(dǎo)、轉(zhuǎn)變職能、創(chuàng)新政府管理與市場(chǎng)監(jiān)管的模式。而城市軌道交通的投資體量巨大，一條線路動(dòng)輒上百億元，如何保證投資效益、提升投資管理工作的精確性和可控性是當(dāng)務(wù)之急。應(yīng)引入“互聯(lián)網(wǎng)+”思維，研發(fā)基于“互聯(lián)網(wǎng)+”的城市軌道交通系統(tǒng)。在分析現(xiàn)有投資管理存在問(wèn)題基礎(chǔ)上，這里對(duì)該系統(tǒng)的應(yīng)用特點(diǎn)及主要功能進(jìn)行了深入闡述，旨在完善提高系統(tǒng)的功能分布和用戶體驗(yàn)。

代碼實(shí)現(xiàn)

場(chǎng)景搭建

我們先來(lái)搭建基礎(chǔ)場(chǎng)景，因?yàn)檫@個(gè)場(chǎng)景是在 2D 的基礎(chǔ)上實(shí)現(xiàn)的，因此我們需要用拓?fù)浣M件 ht.graph.GraphView 來(lái)搭建基礎(chǔ)場(chǎng)景：

dataModel = new ht.DataModel();// 數(shù)據(jù)容器，用來(lái)存儲(chǔ)數(shù)據(jù)節(jié)點(diǎn)
graphView = new ht.graph.GraphView(dataModel);// 拓?fù)浣M件
graphView.addToDOM();// 將拓?fù)浣M件添加到 body 體中

上面代碼中出現(xiàn)的 addToDOM 方法將組建添加到 DOM 的 body 中，HT（https://hightopo.com）的組件一般都會(huì)嵌入 BorderPane、SplitView 和 TabView 等（均為 HT 的組件）容器中使用，而最外層的 HT 組件則需要用戶手工將 getView() 返回的底層 p 元素添加到頁(yè)面的 DOM 元素中，這里需要注意的是，當(dāng)父容器大小變化時(shí)，如果父容器是 BorderPane 和 SplitView 等這些 HT 預(yù)定義的容器組件，則 HT 的容器會(huì)自動(dòng)遞歸調(diào)用孩子組件 invalidate 函數(shù)通知更新。但如果父容器是原生的 html 元素， 則 HT 組件無(wú)法獲知需要更新，因此最外層的 HT 組件一般需要監(jiān)聽(tīng) window 的窗口大小變化事件，調(diào)用最外層組件 invalidate 函數(shù)進(jìn)行更新。

為了最外層組件加載填充滿窗口的方便性，HT 的所有組件都有 addToDOM 函數(shù)，其實(shí)現(xiàn)邏輯如下，其中 iv 是 invalidate 的簡(jiǎn)寫(xiě)：

addToDOM = function(){
    var self = this,
        view = self.getView(),// 獲取組件的底層 p
        style = view.style;
    document.body.appendChild(view);// 將組件底層p添加進(jìn)body中
    style.left = '0';// ht 默認(rèn)將所有的組件的position都設(shè)置為absolute絕對(duì)定位
    style.right = '0';
    style.top = '0';
    style.bottom = '0';
    window.addEventListener('resize', function () { self.iv(); }, false);// 窗口大小改變事件，調(diào)用刷新函數(shù)
}

場(chǎng)景導(dǎo)入

在 HT 中，常用的一種方法將場(chǎng)景導(dǎo)入到內(nèi)部就是靠解析 JSON 文件，用 JSON 文件來(lái)搭建場(chǎng)景的好處之一就是可以循環(huán)利用，我們今天的場(chǎng)景就是利用 JSON 畫(huà)出來(lái)的。接下來(lái) HT 將利用  ht.Default.xhrLoad 函數(shù)載入 JSON 場(chǎng)景，并用 HT 封裝的 DataModel.deserialize(json) 來(lái)反序列化（http://hightopo.com/guide/gui...），并將反序列化的對(duì)象加入 DataModel：

ht.Default.xhrLoad('demo2.json', function(text) {
    var json = ht.Default.parse(text);
    if(json.title) document.title = json.title;//將 JSON 文件中的 titile 賦給全局變量 titile 
    dataModel.deserialize(json);//反序列化
    graphView.fitContent(true);//縮放平移拓?fù)湟哉故舅袌D元，即讓所有的元素都顯示出來(lái)
});

在 HT 中，Data 類型對(duì)象構(gòu)造時(shí)內(nèi)部會(huì)自動(dòng)被賦予一個(gè) id 屬性，可通過(guò) data.getId() 和 data.setId(id) 獲取和設(shè)置，Data 對(duì)象添加到 DataModel 之后不允許修改 id 值，可通過(guò) dataModel.getDataById(id) 快速查找 Data 對(duì)象。但是一般建議 id 屬性由 HT 自動(dòng)分配，用戶業(yè)務(wù)意義的唯一標(biāo)示可存在 tag 屬性上，通過(guò) Data#setTag(tag) 函數(shù)允許任意動(dòng)態(tài)改變 tag 值，通過(guò)DataModel#getDataByTag(tag) 可查找到對(duì)應(yīng)的 Data 對(duì)象，并支持通過(guò) DataModel#removeDataByTag(tag) 刪除 Data 對(duì)象。我們這邊通過(guò)在 JSON 中設(shè)置 Data 對(duì)象的 tag 屬性，在代碼中通過(guò) dataModel.getDataByTag(tag) 函數(shù)來(lái)獲取該 Data 對(duì)象：

{
    "c": "ht.Block",
    "i": 3849,
    "p": {
        "displayName": "通風(fēng)1",
        "tag": "fan1",
        "position": {
            "x": 491.24174,
            "y": 320.88985
        },
        "width": 62,
        "height": 62
    }
}

var fan1 = dataModel.getDataByTag('fan1');
var fan2 = dataModel.getDataByTag('fan2');
var camera1 = dataModel.getDataByTag('camera1');
var camera2 = dataModel.getDataByTag('camera2');
var camera3 = dataModel.getDataByTag('camera3');
var redAlarm = dataModel.getDataByTag('redAlarm');
var yellowAlarm = dataModel.getDataByTag('yellowAlarm');

我在下圖中做了各標(biāo)簽對(duì)應(yīng)的元素：

動(dòng)畫(huà)

接著我們對(duì)需要旋轉(zhuǎn)、閃爍的對(duì)象進(jìn)行設(shè)置，HT 中對(duì)“旋轉(zhuǎn)”封裝了 setRotation(rotation) 函數(shù)，通過(guò)獲得對(duì)象當(dāng)前的旋轉(zhuǎn)角度，在這個(gè)角度的基礎(chǔ)上再增加某個(gè)弧度，通過(guò) setInterval 定時(shí)調(diào)用，這樣就能在一定的時(shí)間間隔內(nèi)旋轉(zhuǎn)相同的弧度：

setInterval(function(){
    var time = new Date().getTime();
    var deltaTime = time - lastTime;
    var deltaRotation = deltaTime * Math.PI / 180 * 0.1;
    lastTime = time;

    fan1.setRotation(fan1.getRotation() + deltaRotation*3);
    fan2.setRotation(fan2.getRotation() + deltaRotation*3);
    camera1.setRotation(camera1.getRotation() + deltaRotation/3);
    camera2.setRotation(camera2.getRotation() + deltaRotation/3);
    camera3.setRotation(camera3.getRotation() + deltaRotation/3);

    if (time - stairTime > 500) {
        stairIndex--;
        if (stairIndex < 0) {
            stairIndex = 8;
        }
        stairTime = time;
    }

    for (var i = 0; i < 8; i++) {// 因?yàn)橛幸恍┫嗨频脑匚覀冊(cè)O(shè)置的 tag 名類似，只是在后面換成了1、2、3，所以我們通過(guò) for 循環(huán)來(lái)獲取
        var color = stairIndex === i ? '#F6A623' : '#CFCFCF';
        dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color);
        dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);
    }

    if (new Date().getSeconds() % 2 === 1) {
        yellowAlarm.s('shape.background', null);
        redAlarm.s('shape.background', null);
    }
    else {
        yellowAlarm.s('shape.background', 'yellow');
        redAlarm.s('shape.background', 'red');
    }
}, 5);

當(dāng)然還是可以通過(guò) HT 封裝的動(dòng)畫(huà)進(jìn)行操作，不過(guò)這里不一次性投食太多，有興趣的可以看看我發(fā)布的 https://www.cnblogs.com/xhloa... 等其它文章。

HT 還封裝了 setStyle 函數(shù)用來(lái)設(shè)置樣式，可簡(jiǎn)寫(xiě)為 s，具體樣式請(qǐng)參考 HT for Web 樣式手冊(cè)（http://hightopo.com/guide/gui...）：

for (var i = 0; i < 8; i++) {// 因?yàn)橛幸恍┫嗨频脑匚覀冊(cè)O(shè)置的 tag 名類似，只是在后面換成了1、2、3，所以我們通過(guò) for 循環(huán)來(lái)獲取
    var color = stairIndex === i ? '#F6A623' : '#CFCFCF';
    dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color);
    dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);
}

我們還對(duì)“警告燈”的閃爍進(jìn)行了定時(shí)控制，如果是偶數(shù)秒的時(shí)候，就將燈的背景顏色設(shè)置為“無(wú)色”，否則，如果是 yellowAlarm 則設(shè)置為“黃色”，如果是 redAlarm 則設(shè)置為“紅色”：

if (new Date().getSeconds() % 2 === 1) {
    yellowAlarm.s('shape.background', null);
    redAlarm.s('shape.background', null);
}
else {
    yellowAlarm.s('shape.background', 'yellow');
    redAlarm.s('shape.background', 'red');
}

總結(jié)

2015 年 3 月，李克強(qiáng)總理在政府工作報(bào)告中首次提出“互聯(lián)網(wǎng)+”行動(dòng)計(jì)劃。之后，國(guó)務(wù)院印發(fā)《關(guān)于積極推進(jìn)“互聯(lián)網(wǎng)+”行動(dòng)的指導(dǎo)意見(jiàn)》，推動(dòng)互聯(lián)網(wǎng)由消費(fèi)領(lǐng)域向生產(chǎn)領(lǐng)域拓展，從而進(jìn)一步提升產(chǎn)業(yè)發(fā)展水平，增強(qiáng)行業(yè)創(chuàng)新能力。在此“互聯(lián)網(wǎng)+”的背景之下，城市軌道交通行業(yè)應(yīng)當(dāng)緊跟時(shí)代潮流，將“互聯(lián)網(wǎng)+”思維引入工程投資管理之中，研發(fā)一種基于“互聯(lián)網(wǎng)+”的城市軌道交通工程投資管理系統(tǒng)，從而提升造價(jià)管理系統(tǒng)的功能分布和用戶體驗(yàn)?！盎ヂ?lián)網(wǎng)+”通過(guò)行業(yè)跨界，尋找互聯(lián)網(wǎng)與城市軌道交通工程的相關(guān)性，將傳統(tǒng)行業(yè)的數(shù)據(jù)進(jìn)行信息化處理，將原本有限的數(shù)據(jù)進(jìn)行提升、分析和流轉(zhuǎn)，利于“互聯(lián)網(wǎng)+”的乘數(shù)效應(yīng)，顯著提升工程投資管理中數(shù)據(jù)的實(shí)時(shí)動(dòng)態(tài)和完整精確。

這篇文章主要為大家詳細(xì)介紹了交通信息化及實(shí)例講解，圖文詳解容易學(xué)習(xí)，配合代碼閱讀理解效果更佳，非常適合初學(xué)者入門(mén)，感興趣的小伙伴們可以參考一下。