隨著機(jī)動車保有量激增與加油站密度擴(kuò)張，傳統(tǒng)管理模式在安全監(jiān)管、數(shù)據(jù)協(xié)同等方面的短板日益凸顯。廈門圖撲軟件（Hightopo）基于自主研發(fā)的 HT 前端插件，以 WebGL 與 Canvas 為底層渲染技術(shù)，構(gòu)建了智慧加油站數(shù)字孿生可視化系統(tǒng)，實(shí)現(xiàn)從設(shè)備監(jiān)控到應(yīng)急管理的全流程技術(shù)賦能。本文將從技術(shù)架構(gòu)、核心模塊實(shí)現(xiàn)邏輯及關(guān)鍵技術(shù)特性展開分析，拆解數(shù)字孿生技術(shù)在加油站場景的落地路徑。

智慧加油站系統(tǒng)的技術(shù)底座，由圖撲可視化渲染引擎與全鏈路數(shù)據(jù)交互體系構(gòu)成，二者協(xié)同實(shí)現(xiàn) “數(shù)據(jù)實(shí)時(shí)獲取 - 動態(tài)解析 - 可視化呈現(xiàn)” 的閉環(huán)，為上層業(yè)務(wù)模塊提供穩(wěn)定技術(shù)支撐。HT 作為專為工業(yè)級可視化設(shè)計(jì)的前端插件，其核心優(yōu)勢體現(xiàn)在渲染效率與開發(fā)靈活性上，適配加油站高實(shí)時(shí)性、高安全性的場景需求：

組件化 API 設(shè)計(jì)：提供封裝完備的 2D 面板、3D 組態(tài)、數(shù)據(jù)綁定等 API，開發(fā)者無需關(guān)注底層渲染邏輯，通過 JavaScript 腳本即可獲取到相關(guān)節(jié)點(diǎn)（如實(shí)時(shí)數(shù)據(jù)儀表盤、設(shè)備狀態(tài)指示器），大幅降低數(shù)字孿生場景的開發(fā)門檻；

數(shù)據(jù)驅(qū)動視圖機(jī)制：采用 “數(shù)據(jù)模型 - 視圖分離” 架構(gòu)，當(dāng)接口數(shù)據(jù)更新時(shí)，僅需修改節(jié)點(diǎn)上的數(shù)據(jù)，HT 會自動觸發(fā)視圖重繪，適配加油站每秒級的設(shè)備數(shù)據(jù)更新需求。

可通過WebSocket 與 HTTP 協(xié)議分層協(xié)作，實(shí)現(xiàn)不同類型數(shù)據(jù)的高效傳輸，平衡實(shí)時(shí)性與資源占用：

WebSocket 協(xié)議：高實(shí)時(shí)性數(shù)據(jù)傳輸：針對加油機(jī)提槍次數(shù)、油罐油溫、安防攝像頭動態(tài)等需秒級更新的數(shù)據(jù)，采用 WebSocket 建立客戶端與服務(wù)器的長連接。服務(wù)器端實(shí)時(shí)采集傳感器數(shù)據(jù)后，通過全雙工通道主動推送至前端，前端監(jiān)聽數(shù)據(jù)推送事件并觸發(fā) HT 組件更新，確保數(shù)據(jù)延遲控制在 100ms 以內(nèi)；

HTTP 協(xié)議：周期性數(shù)據(jù)傳輸：對于月累計(jì)加油量、設(shè)備維護(hù)記錄等更新頻率較低（分鐘級 / 小時(shí)級）的數(shù)據(jù)，采用 HTTP 協(xié)議發(fā)起周期性請求。前端通過定時(shí)器調(diào)度 HTTP 請求，攜帶時(shí)間范圍、數(shù)據(jù)類型等參數(shù)從后端接口獲取數(shù)據(jù)，解析后更新 HT 統(tǒng)計(jì)面板，避免長連接占用過多服務(wù)器資源；

數(shù)據(jù)格式標(biāo)準(zhǔn)化：無論是 WebSocket 推送還是 HTTP 請求返回，數(shù)據(jù)均采用 JSON 格式封裝，包含 “設(shè)備 ID、指標(biāo)名稱、實(shí)時(shí)值、時(shí)間戳、狀態(tài)標(biāo)識” 等標(biāo)準(zhǔn)化字段，確保前端解析邏輯統(tǒng)一，降低多數(shù)據(jù)源適配的復(fù)雜度。

基于 HT 插件與數(shù)據(jù)傳輸鏈路，系統(tǒng)將加油站核心場景拆解為加油機(jī)可視化、油罐區(qū)監(jiān)控、安防與消防管理三大模塊。

加油機(jī)作為加油站核心作業(yè)設(shè)備，需實(shí)時(shí)監(jiān)控提槍次數(shù)、加油量等關(guān)鍵指標(biāo)，HT 系統(tǒng)通過 “數(shù)據(jù)接入 - 2D 面板綁定 - 3D 場景交互” 實(shí)現(xiàn)全維度監(jiān)控：

可視化呈現(xiàn)層：前端通過 WebSocket 接收實(shí)時(shí)數(shù)據(jù)后，調(diào)用相關(guān) API，實(shí)時(shí)更新 “油號 - 提槍次數(shù) - 加油量” 2D 面板數(shù)據(jù)。同時(shí)在 3D 場景中為每個(gè)加油機(jī)模型綁定狀態(tài)屬性 —— 點(diǎn)擊任意加油機(jī)模型，可出發(fā)交互事件，使用JavaScript 調(diào)用相關(guān) API 顯示“數(shù)據(jù)彈窗”，展示當(dāng)日實(shí)時(shí)數(shù)據(jù)（如 92# 汽油提槍 103 次、加油量 2765L）與當(dāng)月累計(jì)數(shù)據(jù)，實(shí)現(xiàn) “場景交互 - 數(shù)據(jù)查詢” 的無縫銜接；

異常監(jiān)測邏輯：在場景中預(yù)設(shè)數(shù)據(jù)閾值（如單槍單次加油量超過 100L 觸發(fā)異常），當(dāng)接口數(shù)據(jù)超過閾值時(shí)，插件自動將對應(yīng)加油機(jī)模型標(biāo)記為 “紅色告警狀態(tài)”，并同步在 2D 面板中高亮異常數(shù)據(jù)行，實(shí)現(xiàn)異常的實(shí)時(shí)識別。

加油站油罐區(qū)屬于地下隱蔽工程，傳統(tǒng)管理難以實(shí)時(shí)掌握油位、油溫等狀態(tài)，HT 系統(tǒng)通過三維組態(tài)仿真 + 遠(yuǎn)程控制 API實(shí)現(xiàn)技術(shù)突破：

1:1 三維建模技術(shù)：HT可渲染呈現(xiàn)油罐區(qū)的三維模型，其中包含油罐本體、輸油管道、閥門等各類部件，模型精度達(dá)到毫米級；同時(shí)，借助紋理映射技術(shù)，能夠精準(zhǔn)還原油罐的材質(zhì)質(zhì)感，從而確保可視化場景與物理場景高度一致；

數(shù)據(jù)動態(tài)綁定：對接油罐液位傳感器、溫度傳感器數(shù)據(jù)接口，通過 HTTP 協(xié)議周期性獲取油號、體積、水高、濁高、油溫等參數(shù)，調(diào)用相關(guān)的 API 將數(shù)據(jù)關(guān)聯(lián)至三維模型 —— 例如將 “油溫 16℃” 綁定至油罐模型的 “溫度標(biāo)簽”，“油高 2.6m” 通過模型內(nèi)的 “虛擬液位柱” 動態(tài)展示，直觀呈現(xiàn)油罐內(nèi)部狀態(tài)；

遠(yuǎn)程控制實(shí)現(xiàn)：在 HT 3D 場景中為油罐區(qū)機(jī)房門、輸油閥門等可操作部件添加 “交互事件”，當(dāng)交互事件被觸發(fā)時(shí)，可通過 HTTP 協(xié)議發(fā)送至后端控制系統(tǒng)，實(shí)現(xiàn)遠(yuǎn)程開關(guān)機(jī)房門、調(diào)節(jié)閥門開度等操作。同時(shí)，后端接口會返回操作結(jié)果（如 “機(jī)房門已開啟”），并更新 3D 模型的狀態(tài)（如機(jī)房門模型從 “關(guān)閉” 動畫切換為 “開啟”），形成 “操作 - 反饋” 閉環(huán)。

加油站作為易燃易爆場所，安防與消防需實(shí)現(xiàn) “7*24h 監(jiān)測 - 異常識別 - 應(yīng)急處置” 的全流程智能化，HT 系統(tǒng)通過視頻融合等技術(shù)構(gòu)建安全防護(hù)網(wǎng)：

全域安防數(shù)據(jù)集成：系統(tǒng)可聯(lián)動加油車道攝像頭、營業(yè)廳紅外探測器、財(cái)務(wù)室門禁系統(tǒng)等安防子系統(tǒng)，通過 WebSocket 協(xié)議實(shí)時(shí)采集車輛出入信息、人員移動軌跡、設(shè)備運(yùn)行狀態(tài)等數(shù)據(jù)，并同步更新 3D 可視化場景與 2D 數(shù)據(jù)面板內(nèi)容。例如，在 3D 場景中精準(zhǔn)標(biāo)記車輛實(shí)時(shí)位置，在 2D 面板內(nèi)動態(tài)展示加油收費(fèi)金額與人員打卡記錄，從而實(shí)現(xiàn) “場景可視化 - 數(shù)據(jù)實(shí)時(shí)化” 的全域協(xié)同；

違規(guī)行為智能識別：當(dāng)傳感器等設(shè)備識別到抽煙、燃放煙花等違規(guī)行為時(shí)，會將告警數(shù)據(jù)實(shí)時(shí)傳輸至前端系統(tǒng)，觸發(fā)場景告警機(jī)制：在 3D 可視化場景中高亮標(biāo)記告警位置，同步彈出語音提示框，同時(shí)將告警信息推送至管理人員移動端，有效實(shí)現(xiàn)從 “被動監(jiān)測” 到 “主動預(yù)警” 的模式轉(zhuǎn)變；

消防應(yīng)急可視化調(diào)度：融合煙感報(bào)警器、噴淋系統(tǒng)等消防設(shè)備數(shù)據(jù)，當(dāng)監(jiān)測到火災(zāi)信號時(shí)，系統(tǒng)可啟動三步響應(yīng)：一是定位告警地點(diǎn)，在 3D 場景中以 “紅色閃爍圖標(biāo)” 標(biāo)記火源位置；二是調(diào)取應(yīng)急預(yù)案，通過 2D 面板展示滅火流程（如關(guān)閉輸油閥門、啟動噴淋系統(tǒng)）；三是聯(lián)動視頻融合技術(shù)，將現(xiàn)場 2D 視頻流嵌入 3D 場景對應(yīng)位置，管理人員通過 PC、PAD 等終端即可直觀查看現(xiàn)場情況，遠(yuǎn)程調(diào)度消防資源。

圖撲 HT 數(shù)字孿生系統(tǒng)在智慧加油站的應(yīng)用中，通過技術(shù)創(chuàng)新解決了傳統(tǒng)管理的核心痛點(diǎn)，同時(shí)具備可復(fù)用、可擴(kuò)展的技術(shù)特性，為石油行業(yè)數(shù)字化轉(zhuǎn)型提供參考：

HT 插件基于 HTML5 標(biāo)準(zhǔn)開發(fā)，支持在 PC、PAD、智能手機(jī)等終端的瀏覽器中直接運(yùn)行，無需安裝客戶端。針對移動端交互需求，HT 提供 “單指旋轉(zhuǎn)、雙指縮放、三指平移” 的觸控 API，適配觸屏設(shè)備的操作習(xí)慣；同時(shí)采用模型輕量化技術(shù)，可 1:1 真實(shí)還原油罐區(qū)、加油機(jī)等 3D 模型，滿足現(xiàn)場巡檢人員的實(shí)時(shí)查看需求。

為解決事故后期溯源困難的問題，系統(tǒng)集成 HT 視頻融合技術(shù)：借助 WebGL 技術(shù)對 2D 視頻圖像與 3D 場景模型進(jìn)行坐標(biāo)校準(zhǔn)，實(shí)現(xiàn)視頻畫面與 3D 場景的精準(zhǔn)疊加。例如，可將加油車道攝像頭的視頻流嵌入 3D 場景中對應(yīng)的車道位置，管理人員通過旋轉(zhuǎn)場景視角即可查看不同角度的情況，為事故分析提供完整證據(jù)鏈。

基于 HT 插件的動態(tài)數(shù)據(jù)面板實(shí)現(xiàn)，核心是圍繞 “數(shù)據(jù)獲取 - API 調(diào)用 - 動態(tài)渲染” 構(gòu)建技術(shù)鏈路：通過 WebSocket/HTTP 實(shí)現(xiàn)高效的數(shù)據(jù)傳輸，利用 HT 插件的 “數(shù)據(jù) - 視圖” 綁定機(jī)制簡化可視化開發(fā)，最終通過優(yōu)化策略提升系統(tǒng)性能與用戶體驗(yàn)。

該方案的優(yōu)勢在于低開發(fā)成本（無需從零構(gòu)建可視化組件）與高擴(kuò)展性（HT 支持自定義組件開發(fā)，可滿足復(fù)雜業(yè)務(wù)場景），適用于監(jiān)控系統(tǒng)、數(shù)據(jù)中臺、業(yè)務(wù)儀表盤等各類前端可視化項(xiàng)目。在實(shí)際開發(fā)中，需根據(jù)數(shù)據(jù)實(shí)時(shí)性需求選擇合適的傳輸協(xié)議，結(jié)合性能優(yōu)化手段，打造穩(wěn)定、高效的動態(tài)數(shù)據(jù)面板。

審核編輯 黃宇