基於 HTML5 WebGL 的智慧城市（一）

前言

中共中央、國務院在今年12月印發了《長江三角洲區域一體化發展規劃綱要》(下文簡稱《綱要》)，併發出通知，要求各地區各部門結合實際認真貫徹落實。

　　《綱要》強調，要提升基礎設施互聯互通水平，打造數字長三角，協同建設新一代資訊基礎設施，共同推動重點領域智慧應用。大力發展基於物聯網、大資料、人工智慧的專業化服務，提升各領域融合發展、資訊化協同和精細化管理水平。圍繞城市公共管理、公共服務、公共安全等領域，支援有條件的城市建設基於人工智慧和5G 物聯的城市大腦叢集。

城市治理和管理不僅是國家治理體系的重要組成部分，同時也是全球網際網路治理體系的重要載體和構建網路空間命運共同體的重要基礎。上個月我們釋出了一篇文章《基於HTML5 WebGL 構建智慧城市 3D 場景》，大體介紹瞭如何使用ht.js 快速3D  建模，展示了良好的視覺化效果，今天繼續探討智慧城市的應用。

　　demo:http://www.hightopo.com/demo/city/

功能點

• 應急響應
• 交通情況
• 城市漫遊
• 工程情況

1.應急響應

隨著城市化、工業化、資訊化程式加快,各種風險隱患層出不窮,突發事件頻繁發生,已經從“非常態化”的偶發事件演變成了“常態化”的頻發事件,直接威脅著公眾的生命財產安全。為了及時、有效、妥善地處置各種城市突發事件,必須建立統一領導的指揮系統、常備不懈的保障系統和防患未然的防範系統,。

上圖主要以 2/3D聯動的方式，依次展示了在面對突發情況下，城市應急救援的響應過程。

步驟：事故定位->告警設施自啟動->電力切斷->油氣截斷閥啟動->周邊情況->確認告警範圍->通知學校->醫院準備->應急人員準備->交通規劃->應急方案預備->應急方案啟動->應急資源觸發->現場方案預備->現場方案啟動->人員進場->作業中）

實現思路：首先對模型進行分組，並在相應的圖元上標記tag，使用ht.Default.startAnim()  來完成每一步的動畫效果，然後拼接動畫即可實現上圖中的3D 動畫效果。至於右邊的2D 步驟顯示皮膚的聯動，因為本demo 採用的是ht.js 來實現的，ht.DataModel作為承載Data  資料的模型，管理著Data  資料的增刪以及事件派發，右側的2D 皮膚裡的步驟也是一個個Data ，我們只要對其進行資料繫結，在動畫執行到某一時刻，通過動態修資料來控制圖元的透明度等樣式就可以實現2/3D 聯動了。demo 中的事故地點，點選可跳轉到另一個室內定位的案例 。

// 事故定位動畫主要程式碼
 animStep\_1() {
    let process\_01 \= this.main.g2d.dm().getDataByTag("process\_01");
    process\_01.s("opacity", 1);
    let emergencyResponseParent\_1 \= this.main.g3d
        .dm()
        .getDataByTag("emergencyResponseParent\_1"); this.setVisible(emergencyResponseParent\_1, true, "children");
    let children \= this.getChildren(emergencyResponseParent\_1);
    children.forEach(i \=> {
        i.s("shape3d.transparent", true);
        i.s("shape3d.opacity", 0);
    }); this.main.anim = ht.Default.startAnim({
        duration: 2000,
        easing: t \=> { return t;
        },
        finishFunc: () \=> { this.animStep\_2();
        }, // 動畫結束後呼叫的函式。
        action: (v, t) => { this.setStepPanel(process\_01, t, 4); if (t <= 0.25) {
                children\[0\].s("shape3d.opacity", 5 \* Ease.easeOutSine(t));
            } else if (t <= 0.375) {
                children\[1\].s( "shape3d.opacity", 8 \* Ease.easeOutSine(t - 0.25)
                );
            } else if (t <= 0.5) {
                children\[2\].s( "shape3d.opacity", 8 \* Ease.easeOutSine(t - 0.375)
                );
            }
        }
    });
}

2.交通情況

先上圖：

從應用領域來看，目前我國智慧交通主要應用在公路交通訊息化、城市道路交通管理服務資訊化以及城市公交資訊化領域。伴隨著數字化轉型，政府主動牽頭智慧城市建設，未來市場潛力巨大。該功能點能更直觀有效的反應當前的道路交通情況，使各地政府更加有效的、科學的管理交通，發揮出大城市的交通效能。常規的2D 效果圖已經不滿足於當下的需求了，伴隨著大資料、雲端計算、5G、AI、邊緣計算等技術的發展成熟，3D  視覺化更能直觀的、有效的反饋資訊。當然，3D視覺化離不開一款強大的圖形引擎。本模組只是簡單地模擬了交通狀況，並未繼續擴充。

3.城市漫遊

由於計算機圖形學和軟硬體技術的快速發展,虛擬現實技術越來越為人們所重視。虛擬現實技術的應用一直是計算機應用領域的熱點,虛擬現實技術的應用價值已經得到了廣泛的認可。3D 漫遊可以提供很好的使用者互動體驗，所以本demo  也展示了這一功能。

藉助於HT，漫遊功能的實現只要幾行程式碼就可以實現了。ht.Shape是極其強大的圖元型別，這裡繪製漫遊路線就是使用其擴充套件子類ht.Polyline ，繪製一條三維空間管道，然後通過獲取該路徑上的點來不斷設定eye就行了。程式碼如下：

// 漫遊動畫
roamingAnim() {
    // polyline
    let polyline = this.main.g3d.dm().getDataByTag("polyline");
    this.main.anim = ht.Default.startAnim({
        duration: 15000,
        easing: t => {
            return t;
        },
        finishFunc: () => {
        }, // 動畫結束後呼叫的函式。
        action: (v, t) => {
            let length = this.main.g3d.getLineLength(polyline),
                offset = this.main.g3d.getLineOffset(polyline, length * v),
                point = offset.point,
                px = point.x,
                py = point.y,
                pz = point.z;
                this.main.g3d.setEye(
                    px ,
                    py ,
                    pz
                );
                this.main.g3d.setCenter(0, 0, 0);
        }
    });
}

4.工程情況

該頁面主要展示了工程情況：大橋（戳）、盾構作業（戳）、海底隧道（戳）。

至此，該demo 的功能點就介紹完了。

圖一，12月12日晚，廈門地鐵2號線呂厝路口配套的物業開發地塊施工現場發生塌陷，所幸沒有造成人員傷亡，事故原因疑似管道破裂導致，水流將路基中的穩定土層掏空，加上路面上的汽車壓力，導致路面坍塌。

圖二，3月21日下午14:48左右，位於響水縣生態化工園區的化工廠發生爆炸。近年來，多加化工廠爆炸，所造成的生命、財產損失不可估量。

一場場事故觸目驚心，時刻提醒著我們要防患於未然。水是人類生活的源泉而隨著城市的發展水汙染問題也越來越嚴重，水資源監管和治理成為城市發展的一大困擾，水質監控不及時、水災預警不及時更是直接關係到民生問題。而智慧水務的發展則能非常及時、準確的解決問題。假如有比較好的監控預警系統，這些事故發生的可能性將大大降低。後續會再寫些關於智慧水務的文章，也會再擴充應急預案的場景案例。