C#開發BIMFACE系列50 Web網頁中使用jQuery載入模型與圖紙
在前一篇部落格《C#開發BIMFACE系列49Web網頁整合BIMFACE應用的技術方案》中介紹了目前市場主流的Web開發技術與應用框架,其中前端指令碼的應用在國內分2大派系 jQuery 與 Vue.js。
本篇部落格主要介紹Web網頁中使用jQuery載入模型與圖紙以及其他的應用開發。
步驟1:下載並引用 jQuery.jsjQuery 官方目前釋出的版本已經到3.X
但是jQuery從2.0開始不相容IE8,最低支援IE9。而IE8在國內還是有很多使用者,業務系統的開發也就需要相容IE8,所以可以採用下面的相容性寫法
1 <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script> 2 <!--[if IE 8]> 3 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 4 <![endif]-->
- 第一行可以引用2.0及以上版本的jQuery.js
- 第2-4行通過判斷IE瀏覽器的版本來載入對應版本的jQuery.js。常用的有1.8.x與1.9.x版本。
使用語句<!--[if IE 8]>
但是BIMFACE模型或圖紙在網頁中渲染時使用了HTML5、CSS3、WebGL等新技術,對瀏覽器版本要求比較高,在IE相容模式下無法正常載入執行。所以在網頁中使用jQuery1.8以上版本都可以,但是不要在相容性檢視下瀏覽模型或圖紙。
步驟2:下載並引用 BIMFace JSSDK下載地址:
下載的檔案是一個壓縮包,解壓後目錄結構如下:
另外2個目錄是用於離線資料包功能,這裡只需要把[email protected]檔案拷貝到專案中即可,建議增加檔案版本號,修改為[email protected]。有如下兩種引用方式,選擇任一種都可以。
方式1:引用本地檔案
方式2:引用BIMFACE官方線上檔案。優點:一直保持最新版本。
步驟3:根據 FileId 獲取 ViewToken檢視BIMFACE需要使用ViewToken,ViewToken代表對單個模型/整合模型/模型對比的訪問許可權。首先根據 FileId 呼叫介面獲取AccessToken,通過AccessToken呼叫介面獲取ViewToken。
Web.aspx、Web.html、Web.cshtml 中使用ajax呼叫一般處理程式或者MVC控制器是最常用的方法
// 載入模型或圖紙 function loadBIMFile(bimFaceFileId) { $("#bimContainer").empty();//清空容器內容。解決切換不同圖紙時會保留上一次圖紙內容的問題。 $.ajax({ url: "../Handlers/GetViewTokenHandler.ashx", data: { fileId: bimFaceFileId }, dataType: "json", type: "GET", async: false, //同步(此處設定為同步或者非同步都可以) success: function (data) { if (data.code == true) { showBIMModel(data.viewToken);// 載入BIMFACE模型 } else { alert("【警告】\r\n" + data.message); } }, error: function (e) { console.log('GetViewTokenHandler.ashx請求發生異常:' + e); alert("【異常】\r\n" + '獲取ViewToken發生異常'); }, complete: function (XMLHttpRequest, status) { } }); }
一般處理程式
1 using System; 2 using System.Configuration; 3 using System.Text; 4 using System.Web; 5 6 using BIMFace.SDK.CSharp.API; 7 using BIMFace.SDK.CSharp.Common.Extensions; 8 using BIMFace.SDK.CSharp.Common.Log; 9 10 namespace BIMFace.SDK.CSharp.Sample.Handlers 11 { 12 /// <summary> 13 /// GetViewTokenHandler 的摘要說明 14 /// </summary> 15 public class GetViewTokenHandler : IHttpHandler 16 { 17 18 public void ProcessRequest(HttpContext context) 19 { 20 context.Response.ContentEncoding = Encoding.UTF8; 21 22 string bimfaceAppKey = ConfigurationManager.AppSettings["BIMFACE_AppKey"]; 23 string bimfaceAppSecret = ConfigurationManager.AppSettings["BIMFACE_AppSecret"]; 24 if (bimfaceAppKey.IsNullOrWhiteSpace()) 25 { 26 LogUtility.Error("web.config 中未配置 BIMFACE_AppKey。"); 27 } 28 if (bimfaceAppSecret.IsNullOrWhiteSpace()) 29 { 30 LogUtility.Error("web.config 中未配置 BIMFACE_AppSecret。"); 31 } 32 33 string fileId = context.Request["fileId"]; 34 IBasicApi basicApi = new BasicApi(); 35 try 36 { 37 string accessToken = basicApi.GetAccessToken(bimfaceAppKey, bimfaceAppSecret).Data.Token; 38 string viewToken = basicApi.GetViewTokenByFileId(accessToken, fileId.ToLong()).Data; 39 40 var response = new 41 { 42 code = true, 43 message = "", 44 viewToken = viewToken 45 }; 46 47 context.Response.Write(response.SerializeToJson()); 48 } 49 catch (Exception ex) 50 { 51 var response = new 52 { 53 code = false, 54 message = "獲取模型ViewToken失敗。", 55 viewToken = "" 56 }; 57 58 context.Response.Write(response.SerializeToJson()); 59 60 LogUtility.Error("GetViewTokenHandler 產生異常:" + ex); 61 } 62 63 context.Response.End(); 64 } 65 66 public bool IsReusable 67 { 68 get 69 { 70 return false; 71 } 72 } 73 } 74 }步驟4:根據ViewToken載入模型或者圖紙
主要使用了JSSDK中的BimfaceSDKLoaderConfig類與BimfaceSDKLoader物件,所有邏輯程式碼如下
1 // 顯示BIMFACE模型 2 function showBIMModel(viewToken) { 3 var loaderConfig = new BimfaceSDKLoaderConfig(); // 設定BIMFACE JSSDK載入器的配置資訊 4 loaderConfig.viewToken = viewToken; 5 BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback); // 載入BIMFACE JSSDK載入器 6 }
載入成功的回撥函式
1 // 載入成功回撥函式 2 function successCallback(viewMetaData) { 3 /* modelViewer 是全域性物件,它與具體的圖紙或者模型一一對應。如果切換了圖紙/模型,則需要將其重置,然後在後續操作中再建立。*/ 4 modelViewer = { 5 toolbar: undefined, // 工具條 6 annotationmanager: undefined, // annotation的繪製管理器 7 annotationToolbar: undefined, 8 annotationControl: undefined // 重寫annotation的儲存、取消 9 }; 10 11 var dom4Show = document.getElementById('bimContainer'); // 獲取DOM元素 12 13 if (viewMetaData.viewType == "3DView") { 14 var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig(); 15 webAppConfig.domElement = dom4Show; 16 17 app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig); // 建立WebApplication 18 app.addView(viewMetaData.viewToken);//temp_ViewToken // 新增待顯示的模型 19 20 viewer3D = app.getViewer(); // 從WebApplication獲取viewer3D物件 21 22 // 監聽新增view完成的事件 23 viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () { 24 // 呼叫viewer3D物件的Method,可以繼續擴充套件功能 25 modelViewer.toolbar = $(dom4Show).find('.bf-toolbar-bottom'); 26 27 //自適應螢幕大小 28 window.onresize = function () { 29 viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40); 30 } 31 }); 32 33 34 } 35 else if (viewMetaData.viewType == "drawingView") { 36 37 var webAppConfig = new Glodon.Bimface.Application.WebApplicationDrawingConfig(); 38 webAppConfig.domElement = dom4Show; 39 webAppConfig.viewToken = viewMetaData.viewToken; 40 41 app = new Glodon.Bimface.Application.WebApplicationDrawing(webAppConfig); // 建立WebApplication 42 app.load(viewMetaData.viewToken);//viewToken // 新增待顯示的模型 43 44 viewer2D = app.getViewer();// 從WebApplication獲取viewerDrawing物件 45 46 drawingViewExtend(viewer2D); // 監聽新增view完成的事件 47 } 48 }
載入失敗的回撥函式
1 // 載入失敗回撥函式 2 function failureCallback(error) { 3 console.log(error); 4 }
載入二維圖紙的擴充套件方法
1 // 向量dwg擴充套件功能 2 function drawingViewExtend(viewer2D) { 3 var viewerEvents = Glodon.Bimface.Viewer.ViewerDrawingEvent; 4 5 // 註冊 ComponentsSelectionChanged ViewerDrawing圖元點選選中事件 6 viewer2D.addEventListener(viewerEvents.ComponentsSelectionChanged, function () { 7 //ToTo 通過圖元ID找到圖框ID 8 }); 9 10 // 註冊 Loaded ViewerDrawing載入完畢事件 11 viewer2D.addEventListener(viewerEvents.Loaded, function () { 12 var dom4Show = document.getElementById('bimContainer'); // 獲取DOM元素 13 modelViewer.toolbar = $(dom4Show).find('.bf-toolbar-bottom'); 14 15 //自適應螢幕大小 16 window.onresize = function () { 17 viewer2D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40); 18 } 19 }); 20 }
關於BIMFACE整合應用開發,官方提供了非常豐富的示例程式,都是Web網頁整合應用,具體參考 https://bimface.com/developer-jsdemo#1023
下一篇《C#開發BIMFACE系列51 Web網頁中使用Vue.js載入模型與圖紙》
《BIMFace.SDK.CSharp》開源SDK。歡迎大家下載使用。
BIMFACE二次開發系列目錄 【已更新最新開發文章,點選檢視詳細】成在管理,敗在經驗;嬴在選擇,輸在不學! 貴在堅持!
歡迎關注作者頭條號 張傳寧IT講堂,獲取更多IT文章、視訊等優質內容。
1、BIMFace.Community.SDK.NET
開源地址:https://gitee.com/NAlps/BIMFace.SDK
系列部落格:https://www.cnblogs.com/SavionZhang/p/11424431.html
系列視訊:https://www.cnblogs.com/SavionZhang/p/14258393.html
2、ZCN.NET.Common
開源地址:https://gitee.com/NAlps/zcn.net.common
1、Visual Studio、.C#/.NET、.NET Core、MVC、Web API、RESTful API、gRPC、SignalR、Python
2、jQuery、Vue.js、Bootstrap
3、資料庫:SQLServer、MySQL、PostgreSQL、Oracle、SQLite、Redis、MongoDB、ElasticSearch、TiDB、達夢DM、人大金倉、 神通、南大通用 GBase、華為 GaussDB 、騰訊 TDSQL 、阿里 PolarDB、螞蟻金服 OceanBase、東軟 OpenBASE、浪潮云溪資料庫 ZNBase
4、ORM:Dapper、Entity Framework、FreeSql、SqlSugar、分庫分表、讀寫分離
5、架構:領域驅動設計 DDD、ABP
6、環境:跨平臺、Windows、Linux(CentOS、麒麟、統信UOS、深度Linux)、maxOS、IIS、Nginx、Apach
7、移動App:Android、IOS、HarmonyOS、微信、小程式、快應用、Xamarin、uni-app、MUI、Flutter、Framework7、Cordova、Ionic、React Native、Taro、NutUI、Smobiler
雲原生、微服務、Docker、CI/CD、DevOps、K8S;
Dapr、RabbitMQ、Kafka、分散式、大資料、高併發、負載均衡、中介軟體、RPC、ELK;
.NET + Docker + jenkins + Github + Harbor + K8S;
出處:www.cnblogs.com/SavionZhang
作者:張傳寧 微軟MCP、系統架構設計師、系統整合專案管理工程師、科技部創新工程師。
專注於微軟.NET技術(.NET Core、Web、MVC、WinForm、WPF)、通用許可權管理系統、工作流引擎、自動化專案(程式碼)生成器、SOA 、DDD、 雲原生(Docker、微服務、DevOps、CI/CD);PDF、CAD、BIM 審圖等研究與應用。
多次參與電子政務、圖書教育、生產製造等企業級大型專案研發與管理工作。
熟悉中小企業軟體開發過程:需求分析、架構設計、編碼測試、實施部署、專案管理。通過技術與管理幫助中小企業快速化實現網際網路技術全流程解決方案。
本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線,否則保留追究法律責任的權利。
如有問題,可以通過郵件[email protected]聯絡。共同交流、互相學習。
如果您覺得文章對您有幫助,請點選文章右下角【推薦】。您的鼓勵是作者持續創作的最大動力!