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

BIMFACE二次開發系列目錄     【已更新最新開發文章，點擊查看詳細】

在前一篇博客《C#開發BIMFACE系列49 Web網頁集成BIMFACE應用的技術方案》中介紹了目前市場主流的Web開發技術與應用框架，其中前端腳本的應用在國內分2大派系 jQuery 與 Vue.js。

本篇博客主要介紹Web網頁中使用jQuery加載模型與圖紙以及其他的應用開發。先看效果

 

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

jQuery 官方目前發布的版本已經到3.X

 

但是jQuery從2.0開始不兼容IE8，最低支持IE9。而IE8在國內還是有很多使用者，業務系統的開發也就需要兼容IE8，所以可以采用下面的兼容性寫法

<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<!--[if IE 8]>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<![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以上版本都可以，但是不要在兼容性視圖下瀏覽模型或圖紙。

步驟2：下載並引用 BIMFace JSSDK

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

下載的文件是一個壓縮包，解壓后目錄結構如下：

另外2個目錄是用於離線數據包功能，這里只需要把[e-mail]文件拷貝到項目中即可，建議增加文件版本號，修改為[e-mail]。有如下兩種引用方式，選擇任一種都可以。

方式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) {

        }
    });
}

一般處理程序

using System;
using System.Configuration;
using System.Text;
using System.Web;

using BIMFace.SDK.CSharp.API;
using BIMFace.SDK.CSharp.Common.Extensions;
using BIMFace.SDK.CSharp.Common.Log;

namespace BIMFace.SDK.CSharp.Sample.Handlers
{
    /// <summary>
    /// GetViewTokenHandler 的摘要說明
    /// </summary>
    public class GetViewTokenHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentEncoding = Encoding.UTF8;

            string bimfaceAppKey = ConfigurationManager.AppSettings["BIMFACE_AppKey"];
            string bimfaceAppSecret = ConfigurationManager.AppSettings["BIMFACE_AppSecret"];
            if (bimfaceAppKey.IsNullOrWhiteSpace())
            {
                LogUtility.Error("web.config 中未配置 BIMFACE_AppKey。");
            }
            if (bimfaceAppSecret.IsNullOrWhiteSpace())
            {
                LogUtility.Error("web.config 中未配置 BIMFACE_AppSecret。");
            }

            string fileId = context.Request["fileId"];
            IBasicApi basicApi = new BasicApi();
            try
            {
                string accessToken = basicApi.GetAccessToken(bimfaceAppKey, bimfaceAppSecret).Data.Token;
                string viewToken = basicApi.GetViewTokenByFileId(accessToken, fileId.ToLong()).Data;

                var response = new
                {
                    code = true,
                    message = "",
                    viewToken = viewToken
                };

                context.Response.Write(response.SerializeToJson());
            }
            catch (Exception ex)
            {
                var response = new
                {
                    code = false,
                    message = "獲取模型ViewToken失敗。",
                    viewToken = ""
                };

                context.Response.Write(response.SerializeToJson());

                LogUtility.Error("GetViewTokenHandler 產生異常：" + ex);
            }

            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

步驟4：根據ViewToken加載模型或者圖紙

主要使用了JSSDK中的BimfaceSDKLoaderConfig類與BimfaceSDKLoader對象，所有邏輯代碼如下

// 顯示BIMFACE模型
function showBIMModel(viewToken) {
    var loaderConfig = new BimfaceSDKLoaderConfig(); // 設置BIMFACE JSSDK加載器的配置信息
    loaderConfig.viewToken = viewToken;
    BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);  // 加載BIMFACE JSSDK加載器
}

加載成功的回調函數

// 加載成功回調函數
function successCallback(viewMetaData) {
    /* modelViewer 是全局對象，它與具體的圖紙或者模型一一對應。如果切換了圖紙/模型，則需要將其重置，然后在后續操作中再創建。*/
    modelViewer = {
        toolbar: undefined,  // 工具條
        annotationmanager: undefined,  // annotation的繪制管理器
        annotationToolbar: undefined,
        annotationControl: undefined   // 重寫annotation的保存、取消
    };

    var dom4Show = document.getElementById('bimContainer'); // 獲取DOM元素

    if (viewMetaData.viewType == "3DView") {
        var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
        webAppConfig.domElement = dom4Show;

        app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig); // 創建WebApplication
        app.addView(viewMetaData.viewToken);//temp_ViewToken   // 添加待顯示的模型

        viewer3D = app.getViewer();  // 從WebApplication獲取viewer3D對象

        // 監聽添加view完成的事件
        viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
            // 調用viewer3D對象的Method，可以繼續擴展功能
            modelViewer.toolbar = $(dom4Show).find('.bf-toolbar-bottom');

            //自適應屏幕大小
            window.onresize = function () {
                viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40);
            }
        });


    }
    else if (viewMetaData.viewType == "drawingView") {

        var webAppConfig = new Glodon.Bimface.Application.WebApplicationDrawingConfig();
        webAppConfig.domElement = dom4Show;
        webAppConfig.viewToken = viewMetaData.viewToken;

        app = new Glodon.Bimface.Application.WebApplicationDrawing(webAppConfig); // 創建WebApplication
        app.load(viewMetaData.viewToken);//viewToken  // 添加待顯示的模型

        viewer2D = app.getViewer();// 從WebApplication獲取viewerDrawing對象

        drawingViewExtend(viewer2D);    // 監聽添加view完成的事件
    }
}

加載失敗的回調函數

// 加載失敗回調函數
function failureCallback(error) {
    console.log(error);
}

加載二維圖紙的擴展方法

// 矢量dwg擴展功能
function drawingViewExtend(viewer2D) {
    var viewerEvents = Glodon.Bimface.Viewer.ViewerDrawingEvent;

    // 注冊 ComponentsSelectionChanged ViewerDrawing圖元點擊選中事件
    viewer2D.addEventListener(viewerEvents.ComponentsSelectionChanged, function () {
        //ToTo 通過圖元ID找到圖框ID
    });

    // 注冊 Loaded ViewerDrawing加載完畢事件
    viewer2D.addEventListener(viewerEvents.Loaded, function () {
        var dom4Show = document.getElementById('bimContainer'); // 獲取DOM元素
        modelViewer.toolbar = $(dom4Show).find('.bf-toolbar-bottom');

        //自適應屏幕大小
        window.onresize = function () {
            viewer2D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40);
        }
    });
}

關於BIMFACE集成應用開發，官方提供了非常豐富的示例程序，都是Web網頁集成應用，具體參考 https://bimface.com/developer-jsdemo#1023

 

下一篇《C#開發BIMFACE系列51 Web網頁中使用Vue.js加載模型與圖紙》

 

 《BIMFace.SDK.CSharp》開源SDK。歡迎大家下載使用。

BIMFACE二次開發系列目錄     【已更新最新開發文章，點擊查看詳細】