C#開發BIMFACE系列37 網頁集成開發1：審圖系統中加載模型或圖紙

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

　　在之前的《C#開發BIMFACE系列》中主要介紹了BIMFACE平台提供的服務端API接口的封裝開發與測試過程。

服務端API測試通過后，需要根據具體業務的需求集成到管理系統中，配合BIMFACE提供的前端JavaScript API的使用可以很輕松的集成到網頁中實現模型/圖紙的加載、瀏覽、批注對比等功能。

接下來的系列主要介紹網頁集成開發方面的實現過程與經驗。 本篇主要介紹如何在網頁中加載與瀏覽BIM/CAD模型。

先展示網頁中加載BIM模型的實際效果，如下圖：

 

 第1步：在頁面中引用BIMFACE的JS文件。

<script src="https://static.bimface.com/api/BimfaceSDKLoader/[e-mail]"></script>

 第2步：獲取模型文件的ViewToken。

　　BIMFACE模型的查看都是以ViewToken為依據，而不是模型的FileId，並且模型需要轉換成功之后才能查看。

　　使用JQuery的ajax技術調用獲取模型/文件的ViewToken的接口

// 加載BIM模型
function loadBimFile() {
    $.ajax({
        url: "Handlers/GetViewTokenHandler.ashx",
        data: { fileId: fileId },
        dataType: "json",
        type: "GET",
        async: false, //同步
        success: function (data) {
            if (data.code == true) {
                showBimModel(data.viewToken);// 加載BIMFACE模型
            } else {
                $.messager.alert('提示', data.message, 'warning');
            }
        },
        error: function (e) {
            $.messager.alert('提示', e, 'error');
        }
    });
}

GetViewTokenHandler.cs 中的代碼邏輯如下：

/// <summary>
/// 獲取BIMFACE模型的 viewToken
/// </summary>
public class GetViewTokenHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        //context.Response.ContentType = "text/plain";
        //context.Response.Write("Hello World");
        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;
        }
    }
}

其中第27行調用了獲取 AccessToken 的接口，具體請參考我的博客《C#開發BIMFACE系列3 服務端API之獲取應用訪問憑證AccessToken》。

第28行調用了獲取 ViewToken 的接口，具體請參考我的博客《C#開發BIMFACE系列15 服務端API之獲取模型的View token》。

第3步：加載模型。

　　調用BIMFACE的JavaScript PAI，實現模型加載。

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

　（1）調用 BimfaceSDKLoaderConfig() 類做加載前的配置，設置 viewTkon即可。

　（2）調用 BimfaceSDKLoader.load() 方法，加載配置項。該方法提供了2個回調函數，一個是成功回調函數，一個是失敗回調函數。

// 加載成功回調函數
function successCallback(viewMetaData) {
    gc_viewType = viewMetaData.viewType;
    if (viewMetaData.viewType == "3DView") {
        // 獲取DOM元素
        var dom4Show = document.getElementById('bimContainer');
        var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
        webAppConfig.domElement = dom4Show;

        // 創建WebApplication
        app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);

        // 添加待顯示的模型
        app.addView(temp_ViewToken);

        // 從WebApplication獲取viewer3D對象
        viewer3D = app.getViewer();
    }
    else if (viewMetaData.viewType == "drawingView") {
        // ======== 判斷是否為矢量圖紙 ========
        // 獲取DOM元素
        var dom4Show = document.getElementById('bimContainer');
        var webAppConfig = new Glodon.Bimface.Application.WebApplicationDrawingConfig();
        webAppConfig.domElement = dom4Show;
        webAppConfig.viewToken = viewMetaData.viewToken;

        // 創建WebApplication
        app = new Glodon.Bimface.Application.WebApplicationDrawing(webAppConfig);

        // 添加待顯示的模型
        app.load(viewToken);

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

第6行 獲取的DOM元素是頁面上的 div 容器，用於呈現模型適用。

 <div id="bimContainer" class="viewer-wrap">
 </div>

模型分為2種，3DView 表示三維模型；drawingView 表示二維圖紙。

如果模型加載失敗，則執行失敗回調函數

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

第4步：瀏覽模型。

（1）目錄樹

　　目錄樹分4類顯示，分別是：構建、系統、空間、圖紙。

其中“構建”菜單顯示了該模型的所有構建分類與組成詳情。

 

 其中“圖紙”菜單顯示了該模型的對應的而二維圖紙。前提是模型中要包含二維圖紙，且在轉換時需要設置把選項控制導出圖紙。

（2）導航

 提供了查看模型的上、下、左、右、前、后以及主視角等功能。

提示：鍵盤上的 Q、W、E、A、S、D 也可以操作模型以不同的視角呈現模型。

（3）工具欄

 

 從左向右一次是：主視角、框選、測量、剖切、漫游模式、地圖、構建詳情、設置、基本信息、全屏。

 

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