C#開發BIMFACE系列50 Web網頁中使用jQuery載入模型與圖紙

張傳寧發表於2021-10-18
C#Web網頁jQuery模型
BIMFACE二次開發系列目錄     【已更新最新開發文章，點選檢視詳細】
C#開發BIMFACE系列50 Web網頁中使用jQuery載入模型與圖紙

在前一篇部落格《C#開發BIMFACE系列49 Web網頁整合BIMFACE應用的技術方案》中介紹了目前市場主流的Web開發技術與應用框架，其中前端指令碼的應用在國內分2大派系 jQuery 與 Vue.js。

本篇部落格主要介紹Web網頁中使用jQuery載入模型與圖紙以及其他的應用開發。

步驟1：下載並引用 jQuery.js

jQuery 官方目前釋出的版本已經到3.X

 C#開發BIMFACE系列50 Web網頁中使用jQuery載入模型與圖紙

但是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]> <![endif]--> 僅IE8可識別，在IE8模式下進行一些相容操作。這樣在切換到IE8時，低版本的jQuery就會覆蓋高版本的jQuery。如果在IE8下需要調整某些元素的樣式的話，最好將JS程式碼放在頁面底部（並注意是否有行內樣式），不然為某些動態載入的內容設定的樣式可能不會生效。

但是BIMFACE模型或圖紙在網頁中渲染時使用了HTML5、CSS3、WebGL等新技術，對瀏覽器版本要求比較高，在IE相容模式下無法正常載入執行。所以在網頁中使用jQuery1.8以上版本都可以，但是不要在相容性檢視下瀏覽模型或圖紙。

C#開發BIMFACE系列50 Web網頁中使用jQuery載入模型與圖紙

步驟2：下載並引用 BIMFace JSSDK

下載地址：https://bimface.com/developer-guide/984

C#開發BIMFACE系列50 Web網頁中使用jQuery載入模型與圖紙

下載的檔案是一個壓縮包，解壓後目錄結構如下：

C#開發BIMFACE系列50 Web網頁中使用jQuery載入模型與圖紙

另外2個目錄是用於離線資料包功能，這裡只需要把BimfaceSDKLoader@latest-release.js檔案拷貝到專案中即可，建議增加檔案版本號，修改為BimfaceSDKLoader@latest-release-3.6.159.js。有如下兩種引用方式，選擇任一種都可以。

方式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。歡迎大家下載使用。

C#開發BIMFACE系列50 Web網頁中使用jQuery載入模型與圖紙
BIMFACE二次開發系列目錄     【已更新最新開發文章，點選檢視詳細】

相關文章