整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
近幾年，我國智慧城市建設步伐也不斷加快，黨中央和國務院也更加注重智慧園區的建設與發展，智慧園區建設與園區產業發展相結合，向著創新化、生態化發展，更加注重高新技術、綠色環保型等產業的發展，將管理創新與園區智能化相結合。
園區的發展更新換代，集合如：云計算，物聯網，大數據，人工智能，GIS等新興技術，通過對園區內外的數據和資源進行檢測、分析、集成和響應，實現對園區管理信息化、信息傳遞即時化、基礎設施智能化、公共服務便捷化、產業發展現代化、社會治理精細化等，以提高園區產業聚集能力、企業競爭力，并且以園區可持續發展為目標的先進園區發展模式和理念。
今天將介紹圖撲軟件 Hightopo自主研發的 HT 引擎協助打造三維可視化的智慧朔州開發區，通過未來科幻的建筑風格多維度展示開發區，以360度全景可視化結合數據場景聯動，建立一個控制智慧綜合型的智慧城市項目。
整體場景由地球視角動態下鉆至中國版圖，對山西省輪廓進行特效光邊沿立體描繪，并在此下鉆至朔州開發區整體三維場景。其中重點對科創商務園區進行漫游動畫查看朔州新產品展銷館。
智慧朔州開發區以展會大屏的整體設計形式，頁面中展示全區的三維場景，左右兩側輔以數字化智慧城市監測常見的技術觀念里尼指標進行展示，提升業務人員數據分析可視化效率，提升管理決策成功率，輔助領導層進行管理預測。
全場景漫游
除了初始化的園區全場景漫游、定點漫游外，也提供了單個園區的漫游線路，讓用戶以第一人稱的視角按照指定線路對開發區進行全場景漫游，在制定線路的時候可以參考重點區域或智能化水平較高的區域進行制定，給用戶呈現開發區重點發展區域以及智能化發展成效。
園區信息可視化
園區信息可視化主要包含園區GDP、財政數據、工業總產值、固定資產、產出強度、企業匯總、投資要素成本、招商引資。通過園區基本數據信息可對整體園區基本現狀有直觀的了解。數據的展示信息可根據項目的實際需求進行調整，以滿足園區信息的數據可視化。
沙盤布局可視化
整合了朔州開發區內的各項重要信息如園區道路信息、園區水系分布、西山生態林景觀分布等進行全方位展示。傳統的園區管理在成本和投入上都耗費很多精力。通過互聯網多樣化的可視化系統管理方案，整理出一套園區模塊統一在線可視化管理集合，智慧園區通過智能化的監測控制與管理系統，促進信息應用的智慧化和深度化，有效節省了園區運行所需的能源和人工成本的消耗，提升土地監測、布局監控的效率和準確度，解決最根本的環節，提高工作效率、增強園區服務質量和建筑環境的利用率，保障園區安全、穩定、持久的發展。
管網分布可視化
可通過多級檢索功能菜單實現給水管道、污水管道、雨水管道、再生水管道、電力管道、通信管道、燃氣管道、供熱管道等展示。管網分布可視化可幫助管理者實現對綜合管線以標準化的方式進行管理，以三維可視化的形式展現地下管線的埋深、形狀、走向、周邊環境。
同平面管網相比，管道 3D 可視化更方便運維人員進行地下管道對應查找。也為后期地下管線資源的統籌利用和科學布局提供參考依據標準。為管線占用審批等工作提供了準確、直觀、高效的參考。與此同時，對于新增的管網管理，圖撲提供了結合管網拐點立體坐標信息實現三維管網自動渲染生成的功能，為后續的生產和延續性使用帶來極大便利。
土地布局可視化
隨著大數據、BIM、GIS 等新的技術理念興起，土地規劃也有了更新換代，而三維形式的可視化展現更能讓土地規劃可知可控，便于運維人員對的土地進行集中化、科學化管理統籌。打破土地占用數據分散的局面，提高園區土地使用率，高效管理 。圖撲軟件提供基于 WebGL 渲染的三維特效，也讓平臺中的土地分布數據表達更酷炫多彩容易區分。
交通布局可視化
通過不同顏色的高亮展示了交通快速路、主干路、次干路。線路可視化可以知道開發區的交通線路布局，方便運維人員及時有效的對交通路線進行調整部署、獲取交通軌跡數據信息。輔助園區管理部門綜合掌控全區大范圍的線路運行管控。在交通布局上，圖撲可視化也可延伸融合更多功能如綜合態勢監測：集成地理信息系統、視頻監控系統、交管部門各業務系統數據，對交通路況車流量、事故處理報告等要素進行綜合監測，幫助管理者實時掌握交通整體運行態勢等等。
一、 園區全景視角精細化展現
園區內建筑物，管網設施，機動目標等基本建筑信息可在系統上全方位進行展示。例如園區內各種電力設施，交通樞紐，地標建筑，園區內地下管線，機動目標等位置數據實時展現。
二、園區信息數字化展現
原先的園區就像一個信息孤島，各部門、各條管理線之間，在信息資源上無法做到交流共享和互通，獨自運營各自的信息管理系統，通過圖撲軟件的可視化，在充分利用、整合和挖掘信息技術和信息資源的基礎上，對園區達到精細化管理，那么圖撲可視化系統就是園區智慧成果和價值的集中體現，讓智慧園區變得可知可感。
三、園區管理集中化展現
圖撲可視化園區管理系統支持融合多部門、不同平臺的數據對接顯示，管理者可以全方位掌控園區綜合態勢，不同運營管理者也可以互聯互通相關聯信息。包括支持了：政務、警務、交通、電力等實時數據信息；包括支持集成地理信息、GPS數據、建筑物三維數據、統計數據、園區視頻監控采集畫面等多類型數據。
圖撲可視化是基于 HTML5 打造的純 Web 頁面，只要有瀏覽器就可以打開訪問，客戶可以根據當下使用場景，監控態勢，自定義布局想要顯示的內容。既可以重點顯示專項事件，也可以全局掌控園區整體態勢。快速實現現代化的、高性能的、跨平臺的（桌面 Mouse/移動 Touch/虛擬現實 VR）圖形展示效果及交互體驗，并且還能在手機端或者 PAD 端對大屏進行頁面顯示和監控模式等交互控制。
對園區的建設管理進行全方位升級打造，整合園區資源，建立自主創新服務體系，極大地降低園區企業的運營成本，提高工作效率，加強園區的創新、服務和管理能力。通過加入圖撲軟件的Hightopo 的大屏的可視化，能及時利用、挖掘、傳遞數據。使數據有效化的及時呈現和傳遞，通過提取出關鍵、有效的信息，并以酷炫的視覺效果清晰地展現出來。
當然我們也更新了數百個2D/3D 可視化案例集，在這里你能發現許多新奇的實例：《分享數百個 HT 工業互聯網 2D 3D 可視化應用案例 》，有興趣的可以至圖撲軟件官網查看更多行業可視化案例與申請試用~
要：基于WebGL和視頻圖傳技術，利用傾斜攝影實景三維數據，分析構建視頻監控圖像與仿真現實地理空間高度融合場景的技術方法。完整闡述場景構建、信號接入、投影融合、圖像拼接的技術路線，詳述融合的數學模型和編程實現，并結合多年市場調研經驗，介紹本項研究的市場應用前景。
關鍵詞： WebGL 傾斜攝影 實景三維數據 投影融合 測繪學 視頻圖傳
在地理信息系統(GIS)領域中，基于傾斜攝影測量技術制作的實景三維場景具有多項優勢[1]，不僅能完整地還原地形地貌，尤其是城市環境中的建筑物外立面、近地面廣告牌等環境細節，而且具有高精度的可量測性[2]，可進行全角度的三維測量。但是，實景三維場景是某一時間節點的測量成果，本質上屬于靜態地圖[3]，數據的現勢性問題無法避免。為解決這個問題，實景三維GIS越來越多地接入物聯網傳感器，融合現實世界的動態情況，來滿足各自的業務需求[4]。如接入定位信號，在實景三維場景中顯示人員和車輛實時位置等。其中一項最重要的物聯網傳感器就是視頻監控設備，負責將現實世界的實時圖像信息接入由實景三維數據構建的虛擬現實場景，并得到廣泛應用。然而單一視頻監控圖像的視域范圍有限，多路視頻切換或分屏播放都會導致監控目標失去焦點，影響監控效果[5]。同時，屏幕化的視頻監控圖像孤立于周邊環境，不能通過屏幕畫面直觀地了解視頻監控圖像在現實世界中的確切位置，及其與周邊環境的關系。因此，將視頻監控圖像以幾何投影方式貼合到地面(簡稱視頻貼地)，融合到實景三維場景中，多路視頻畫面在空間上拼接，形成較大區域的連續畫面，確立完整的視頻監控環境成為GIS應用研究中一項十分必要的工作。
實現實景三維場景與視頻監控圖像融合的思路主要包括桌面端和瀏覽器端兩個方面，本文將主要論述瀏覽器端的研究。
1、基于WebGL構建的實景三維場景
WebGL(WebGraphicsLibrary)是一種三維繪圖協議，把JavaScript和OpenGLES2.0結合在一起，為HTML5Canvas提供硬件三維加速渲染[6]。這樣就可以在網頁瀏覽器直接渲染實景三維場景，而不需要外置插件。目前，常用的WebGL二次開發接口有CesiumJS和three.js，它們都有完善的地理坐標系接口，可以用于開發標準的GIS應用項目。本文以CesiumJS接口庫為例，構建實景三維場景，因為CesiumJS定義了適宜于網絡傳輸的實景三維數據格式:3DTiles，這種數據是以樹形結構組織起來的瓦片(tiles)集合，并且可以由實景三維建模軟件ContextCapture直接生產[7]。
CesiumJS建立實景三維場景的方法十分簡潔:首先，創建場景對象(Viewer);然后，創建實景三維數據對象(Cesium3DTileset);最后，向場景對象中添加(viewer.scene.primitives.add)對象即可，如圖1所示。
圖1CesiumJS建立實景三維的方法
但需要注意的是實景三維數據的高度，與CesiumJS默認的“地球”之間會存在空隙，因此，還要利用CesiumTerrainProvider對象引入地形數據，最終形成完整的環境效果。
2、視頻監控圖像信號接入
視頻監控圖像接入場景首先要獲取到它的數據流，不同廠商和型號的數據流使用的編碼標準不盡相同，為了具備更好的兼容性，需要使用通用的網絡流媒體協議RTSP(Real-TimeStreamProtocol)進行應用層的數據解析[8]。各廠商設備的RTSP協議取流方法有所區別，但是基本格式相似，都主要包括了IP地址、端口和通道3個參數，以海康設備為例，格式如下:
rtsp://username:password@<address>:<port>/Streaming/Channels/<id>。
但是，目前的HTML5的video標簽仍然無法直接播放RTSP直播數據流，研究中使用了開源視頻播放器VLC提供的流媒體轉碼功能將RTSP轉碼為可以直接播放的OGG格式流數據。VLC的轉碼命令為#transcode，在命令處理工具中執行即可[9]。多路視頻同時轉碼只需要創建VLC命令的JavaScript腳本，利用Node.js執行即可。但是，此時的OGG格式流數據存在跨域訪問問題，需要在Nginx中代理，并添加頭配置。經過代理的OGG格式流數據可以直接被HTML5播放，配置參數如下:add＿headerAccess-Control-Allow-Origin*。
CesiumJS在實景三維場景中接入視頻資源的方法是將video標簽作為材質對象(Material)賦予渲染基元(Primitive)，然后在場景中創建出來即可最終實現接入。總結下來，接入流程如圖2所示。
3、視頻監控圖像投影融合
實景三維場景完美地還原了現實世界的空間關系，相機拍攝的畫面本質上是鏡頭曝光平面沿著視錐體在地面上的投影[10]。而視頻監控圖像與實景三維場景融合的關鍵問題就是將監控圖像與場景中的同名點配準，實現同名點的重合，也就是將畫面逐個像素的坐標從本地坐標系轉變到視錐體裁剪坐標系[11]中。依據這個思路，在實景三維場景中，同樣還原相機的空間位置和安裝姿態，并且模擬鏡頭的視錐體，如圖3所示，在視平面還原視頻監控圖像，利用視錐體獲得其在實景三維數據表面的投影范圍，即可實現圖像投影融合。
圖2CesiumJS接入視頻流程
圖3鏡頭模擬的視椎體
還原相機所需的主要參數包括表1中幾項，這些參數可以通過測量和查看設備說明書獲得。
表1相機主要參數
視頻貼地的渲染基元采用分類基元類(ClassificationPrimitive)，其一致性映射(＿uniformMap)參數控制webgl渲染的深度計算和坐標轉換等映射方式，包括立方體模型視圖(u＿boxMV)和逆立方體模型視圖(u＿inverseBoxMV)兩個變量，這兩個變量用于執行透視除法，確定視頻裁剪后在實景三維數據表面貼地范圍。其計算方法參照WebGL投影變換的基本原理[12]，示意圖如圖4所示。
圖4WebGL投影變換基本原理
首先將相機視錐體原點定位到地理坐標，再利用四維矩陣的計算辦法將地理坐標、朝向、俯角、旋轉角4個參數共同計算組成相機類(Camera)的視圖矩陣(viewMatrix)和逆視圖矩陣(inverseViewMatrix)。然后，使用透視錐體類(PerspectiveFrustum)創建視錐體，包括視場角、寬高比、焦距、拍攝距離4個參數。透視錐體類的投影矩陣參數(projectionMatrix)可以獲取該視錐體的透視投影矩陣，經過反轉(Matrix4.inverse)并與逆視圖矩陣相乘(Matrix4.multiply)得到逆視圖投影矩陣，結果再反轉即可得到視圖投影矩陣。此時得到的視圖投影矩陣可以用于完成坐標變換，利用拍攝距離和四維矩陣的創建辦法(Matrix4.fromUniformScale)生成遠平面標準模型矩陣，如下所示:
[拍攝距離，0.0,0.0,0.0]
[0.0，拍攝距離，0.0,0.0]
[0.0,0.0，拍攝距離，0.0]
[0.0,0.0,0.0,1.0]
再與逆視圖矩陣相乘得到變換所需模型矩陣，并賦予視頻貼地渲染基元的模型矩陣參數(modelMatrix)，完成視頻監控畫面變換到世界坐標系。最后將模擬的視頻監控設備的視圖矩陣與逆視圖投影矩陣相乘，得到立方體模型視圖，同理得到逆立方體模型視圖。將這兩個模型視圖賦予分類基元類的一致性映射參數便可以最終實現視頻監控圖像與實景三維場景的融合，融合效果如圖5所示。
融合效果可以通過以下3點判斷:第一，路口斑馬線在投影后的角度符合實際的平行關系，并且位置與實際位置完全重合;第二，建筑立面牌匾寬度和文字完全重合;第三，人行道邊緣完全銜接。
視頻貼地的基元可以動態渲染，只需要在基元的更新方法(update)中，傳入相機參數，判斷視錐體是否發生變化并相應重新計算模型視圖即可，更新方法(update)會在每一幀調用。如將朝向參數從155.4調整為152，視頻向逆時針旋轉，牌匾錯開的效果如圖6所示。
綜上所述，視頻監控圖像投影融合技術路線總結如圖7所示。
圖5視頻監控與實景三維場景的融合效果
圖6視頻貼地的基元動態渲染效果
圖7視頻監控圖像投影融合技術路線
4、視頻監控圖像拼接
多路視頻監控圖像的拼接就是將多路視頻同時融合到實景三維場景中，依據擇優原則，裁切掉重疊部分，形成連續的監控圖像。CesiumJS的材質類(Material)提供了透明通道參數(alphaImage)，該參數接收灰度(黑-灰-白)圖片，然后與視頻監控圖像進行掩碼計算[13]，便可實現視頻監控圖像的裁切。本地的灰度圖片在創建和編輯的操作方面都不利于Web平臺的維護，因此，需要在瀏覽器的畫布標簽(canvas)中動態繪制灰度圖。canvas標簽提供了完整的繪制方法，lineTo()方法繪制閉合的可見范圍，fill()方法填充顏色，然后將畫布轉為base64編碼格式的圖片，與相機參數共同存儲即可，如圖8、圖9所示。
圖8視頻圖像裁切的灰度圖
圖9多路視頻融合效果
圖10為圍繞十字路口的五路視頻監控圖像拼接成一幅連續畫面的效果，箭頭所指為監控圖像邊界，圈中可以看到一輛公交車從北向南行駛，連續穿越多個分視頻畫面。實驗中視頻監控設備的安裝參數存在誤差導致畫面中物體穿越存在偏移，也證明相機參數對貼地的效果存在關鍵性的影響。
圖10圖像拼接連續畫面的效果
5、結束語
視頻監控目前已經成為國家公共安全、國防、防災應急、消防、旅游工作中應用最為普遍的技術手段。天網工程、雪亮工程、綜合防治工程、磐石行動、數字城管工程等重要工程都圍繞或重點采用這種技術建設。
在多年的用戶體驗積累[9]中可以總結出，用戶需求在視頻監控的空間屬性方面做出進一步的應用效果提升。尤其是在無人機視頻圖傳的應用不斷深入的背景下，視頻與實景三維數據動態融合的應用前景將更加寬廣。
各部門具體應用可大致總結如下:在公安行業，可應用于人員和車輛的連續跟蹤，重點區域合屏監控等;在城管行業，可應用于早、夜市整條街的同時監控;利用無人機進行火災、洪水、地震等自然災害的實時監控和救援搜索;重要機關單位、廠礦、商場、監獄的室內外安保連續監控;在旅游行業，利用固定視頻監控和無人機視頻圖傳應用于景區巡查與搜救、景區宣傳等。
前言
在大數據盛行的現在，大屏數據可視化也已經成為了一個熱門的話題。大屏可視化可以運用在眾多領域中，比如工業互聯網、醫療、交通、工業控制等等。將各項重要指標數據以圖表、各種圖形等形式表現在一個頁面上，各種數據一目了然。隨著瀏覽器不斷發展完善，使用 Web 做大屏展示也已經不是新鮮的事了。市面上已有不少的大屏解決方案，大部分是以放各種圖表的形式呈現，基本是 2D 的呈現。有些是根據投放屏幕的比例設計出來的，并不能自適應于其它的屏幕比例。最近學習了 Hightopo 的 HT for Web 產品，特有的矢量，在各種比例下不失真，加上布局機制，解決了不同屏幕比例下的展示問題，加上 3D 的呈現部分，可以做出別具一格的大屏系統。在這里與大家分享學習，先來張整體效果圖：
本文主要介紹內容如下，文章中以 HT 作為 HT for Web 的簡稱：
一、頁面搭建
在這個系統中，我們需要創建 ht.graph.GraphView 和 ht.graph3d.Graph3dView 來呈現 2D 和 3D 的內容。設計師給到的 display.json 是 2D 圖紙的內容，主要是使用矢量繪制呈現，有一些圖表是用了 Echarts，HT 也有機制可以讓我們使用它們。scene.json 是 3D 場景的內容，大部分模型都是通過 3dMax 建模生成的，該建模工具可以導出 obj 與 mtl 文件，在 HT 中可以通過解析 obj 與 mtl 文件來生成 3d 場景中的所有復雜模型，簡單的模型也可以通過 HT 來建模。關鍵代碼如下：
二、數據對接
頁面加載出來后，就可以與后臺通訊，請求相關數據對接到對應的元素上了。HT 一大強項是作為 Web 組態，所以有很友好的數據綁定方式，我們可以輕松將數據展示到各個節點上。我們這個案例采用隨機數模擬的方式模擬展示數據，在 json 中對相應的節點設置唯一標識 tag，在反序列化完成后，通過 g2d.dm().getDataByTag(tag) 來獲得相應節點，再根據這個節點的數據綁定來將數據展示到改節點上。
以上表格是一個用 ht 定義的矢量節點，矢量由一個個組件組成，組件不僅可以預定義的矩形，文本等內容，也可以引用其它定義好的矢量，甚至可以自定義繪制邏輯，這個表格就由此而來。矢量不僅可以用在 2D 圖紙里，還可以用在 3D 貼圖中，在我們 3D 場景中，以下截圖的幾個面板也是使用矢量實現，
HT 中數據都由 DataModel 驅動，所以 3D 對接數據也是一樣的，這里就不再贅述。
三、動畫效果實現
這個案例中最明顯的動畫應該就是鐵水罐車的動畫了，我們先來聊聊它的實現。基本流程是這樣的
如上，我們依然是在反序列化完成后，通過 car=g3d.dm().getDataByTag('car'); 得到鐵水罐車的節點對象。
通過 car.s('3d.visible', true | false); 就可以控制它的顯隱。
通過不斷修改節點的 3D 坐標就可以實現位移效果 car.setPosition3d(x, y, z);
至于鐵水罐車上的面板，也是個矢量，將它吸附于鐵水罐車節點，它就會跟隨車移動，不需要單獨控制它的坐標來實現動畫。
這部分動畫效果，只要不斷修改貼圖的 uv 值就可以實現，以下是示例代碼，node 還是由 getDataByTag 得來
總結
通過 2D 3D 結合的方式的大屏展示，可以非常直觀的看到數據呈現，比如在履帶出的上料數據，通過它的位置，不需要太多文字描述就知道這里是要展示什么內容。HT 非常輕量，可以結合 2D 3D 呈現數據，矢量在各種屏幕下不失真，還可以適應各種屏幕大小進行展示，用來做大屏可視化再合適不過了。除了在大屏上，電腦上可以展示良好，移動端同樣支持，最后放上一張移動端的效果圖。
作者：勤勞的搬運工
鏈接：https://juejin.im/post/5d6c57b1f265da03cd0a97ef
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
