前言
中共中央、國務院在今年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左右,位於響水縣生態化工園區的化工廠發生爆炸。近年來,多加化工廠爆炸,所造成的生命、財產損失不可估量。
一場場事故觸目驚心,時刻提醒着我們要防患於未然。水是人類生活的源泉而隨着城市的發展水污染問題也越來越嚴重,水資源監管和治理成爲城市發展的一大困擾,水質監控不及時、水災預警不及時更是直接關係到民生問題。而智慧水務的發展則能非常及時、準確的解決問題。假如有比較好的監控預警系統,這些事故發生的可能性將大大降低。後續會再寫些關於智慧水務的文章,也會再拓展應急預案的場景案例。