C#開發BIMFACE系列51 Web網頁中使用Vue.js載入模型與圖紙

BIMFACE二次開發系列目錄     【已更新最新開發文章，點選檢視詳細】

在前一篇部落格《C#開發BIMFACE系列50 Web網頁中使用jQuery載入模型與圖紙》中詳細介紹了在網頁中使用jQuery載入模型與圖紙

本篇部落格主要介紹Web網頁中使用Vue.js載入模型與圖紙以及其他的應用開發。開發步驟與使用jQuery基本相同，更確切地將就是將jQuery語法翻譯成Vue.js來表達。

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

Vue.js 官方目前釋出的版本已經到3.X。之前廣泛使用的是2.X，兩個版本功能相差很大。本文以2.x版本為例進行講解演示。

Vue.js 是我們中國人創造發明的，作者叫尤雨溪。

尤雨溪在谷歌工作，工作過程中受到Angular的啟發，從中提取自己所喜歡的部分，開發出了一款輕量框架。
2014年1月，正式對外發布了Vue.Js第一個版本。具有以下特點：

• 它是一套構建使用者介面的漸進式框架。
• 只關注檢視層，採用自底向上增量開發的設計。
• 它的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。 

Vue.js  入門學習非常簡單，目前國內很多大廠都在使用它。

GitHub下載地址： https://github.com/vuejs/vue

下載後直接在網頁中引用

步驟2：下載並引用 BIMFace JSSDK

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

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

另外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控制器是最常用的方法。jQuery中針對Ajax封裝了幾個常用的方法，簡單、實用、易用，示例如下：

// 載入模型或圖紙
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) {

        }
    });
}

但是Vue.js中並沒有直接提供Ajax的相關方法。在Vue.js 1.x 版本中使用到 vue-resource 庫，在2.x版本推薦使用 Axios 來完成 Ajax 請求。Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。GitHub下載地址：https://github.com/axios/axios

 

 下載完成後在專案中引用

使用axiox請求一般處理程式的程式碼如下：

loadBIMFile(bimFaceFileId) { // 載入模型或圖紙
    document.getElementById("bimContainer").innerHTML = "";//清空容器內容。解決切換不同圖紙時會保留上一次圖紙內容的問題。

    // 根據FileId，查詢ViewToken
    axios.get('../Handlers/GetViewTokenHandler.ashx', {
        params: {
            fileId: bimFaceFileId
        }
    })
        // .then(function (response) {  /* 匿名函式的指標，指向函式操作的本身。所以then 函式中無法呼叫 Vue 物件中定義的函式 */
        //    if (response.data.code == true) {
        //        alert('response.data.viewToken：' + response.data.viewToken);
        //        this.showBIMModel(response.data.viewToken);// 載入BIMFACE模型
        //    } else {
        //        alert("【警告】\r\n" + data.message);
        //    }
        //})
        .then((response) => {  /* 箭頭函式的指標，指向 Vue 元件的本身 */
            if (response.data.code == true) {
                this.showBIMModel(response.data.viewToken);// 載入BIMFACE模型
            } else {
                alert("【警告】\r\n" + data.message);
            }
        }).catch((error) => {
            console.log('GetViewTokenHandler.ashx請求發生異常：' + error);
            alert("【異常】\r\n" + '獲取ViewToken發生異常 ' + error);
        });
},

特別說明

Vue.js 使用 axios 的回撥函式中 this 指向問題。then() 回撥函式

• 回撥函式寫成箭頭函式（上述程式碼第18行），則回撥函式的指標指向 Vue 元件本身，可以通過 this 關鍵字呼叫 Vue 元件其內部定義的屬性、方法等。
• 回撥函式寫成匿名函式（上述程式碼第10行），則回撥函式的指標指向函式操作的本身，此時如果用this去呼叫Vue元件中定義的屬性、方法會報錯。

所以此處寫成箭頭函式形式，然後呼叫其他方法。

Axios 是一個基於 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

本質上也是對原生XHR的封裝，只不過它是 Promise 的實現版本，符合最新的ES規範，有以下特點：

• 從瀏覽器中建立 XMLHttpRequests
• 從 node.js 建立 http 請求
• 支援 Promise API
• 攔截請求和響應
• 轉換請求資料和響應資料
• 取消請求
• 自動轉換 JSON 資料
• 客戶端支援防禦 XSRF

具體請參考Axios中文文件 http://www.axios-js.com/zh-cn

一般處理程式

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物件，示例完整的程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>網頁中使用Vue.js載入模型/圖紙</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            overflow: hidden;
        }

        .viewer-wrap {
            width: 100%;
            height: 100%;
            background: rgb(50, 50, 55) none repeat scroll 0% 0%;
        }
    </style>
    <script src="../Content/js/Vue-2.6.14.min.js"></script>
    <script src="../Content/js/axios-0.23.0.min.js"></script>
    <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"></script>
</head>
<body>
    <div id="bimContainer" class="viewer-wrap">

    </div>

    <script type="text/javascript">
        window.onload = function () {
            //var vm =
            new Vue({
                el: '#bimContainer',
                data: {
                    /* bimFaceFileId 呼叫上傳介面把檔案傳送到BIMFACE伺服器後返回fileID，開發者記錄下來。
                     * fileId:10000709359577 模型
                     * fileId:10000709090473 圖紙
                     * */
                    fileId: 10000709359577,
                    app: null,
                    viewer2D: null,
                    viewer3D: null,
                    modelViewer: {
                        toolbar: undefined,  // 工具條
                        annotationmanager: undefined,  // annotation的繪製管理器
                        annotationToolbar: undefined,
                        annotationControl: undefined   // 重寫annotation的儲存、取消
                    }
                },
                beforeCreate: function () {
                    /* 在例項初始化之後，資料觀測（data observer） 和 event/watcher 事件配置之前被呼叫 */
                    console.log('beforCreate');
                },
                created: function () {
                    /* 在例項建立完成後被立即呼叫。
                     * 在這一步，例項已完成以下配置：資料觀測（data observer）、屬性和方法的運算、watch/event 事件回撥。
                     * 然後，掛在階段還未開始，$el 屬性目前不可見。
                     */
                    console.log('created');
                },
                beforeMount: function () {
                    /* 在掛載開始之前被呼叫：相關的渲染函式首次被呼叫*/
                    console.log('beforMount');
                },
                mounted() {
                    /* el被新建立的 vm.$el 替換，掛載成功 */
                    console.log('mounted');

                    this.loadBIMFile(this.fileId);
                },
                beforeUpdate: function () {
                    /* 資料更新時呼叫 */
                    console.log('beforeUpdate');
                },
                updated: function () {
                    /* 元件 DOM 已經更新，元件更新完畢 */
                    console.log('updated');
                },
                methods: {
                    loadBIMFile(bimFaceFileId) { // 載入模型或圖紙
                        document.getElementById("bimContainer").innerHTML = "";//清空容器內容。解決切換不同圖紙時會保留上一次圖紙內容的問題。

                        // 根據FileId，查詢ViewToken
                        axios.get('../Handlers/GetViewTokenHandler.ashx', {
                            params: {
                                fileId: bimFaceFileId
                            }
                        })
                            // .then(function (response) {  /* 匿名函式的指標，指向函式操作的本身。所以then 函式中無法呼叫 Vue 物件中定義的函式 */
                            //    if (response.data.code == true) {
                            //        alert('response.data.viewToken：' + response.data.viewToken);
                            //        this.showBIMModel(response.data.viewToken);// 載入BIMFACE模型
                            //    } else {
                            //        alert("【警告】\r\n" + data.message);
                            //    }
                            //})
                            .then((response) => {  /* 箭頭函式的指標，指向 Vue 元件的本身 */
                                if (response.data.code == true) {
                                    this.showBIMModel(response.data.viewToken);// 載入BIMFACE模型
                                } else {
                                    alert("【警告】\r\n" + data.message);
                                }
                            }).catch((error) => {
                                console.log('GetViewTokenHandler.ashx請求發生異常：' + error);
                                alert("【異常】\r\n" + '獲取ViewToken發生異常 ' + error);
                            });
                    },

                    showBIMModel(viewToken) {// 顯示BIMFACE模型
                        var loaderConfig = new BimfaceSDKLoaderConfig(); // 設定BIMFACE JSSDK載入器的配置資訊
                        loaderConfig.viewToken = viewToken;
                        BimfaceSDKLoader.load(loaderConfig, this.successCallback, this.failureCallback);  // 載入BIMFACE JSSDK載入器
                    },

                    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.getElementsByClassName("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物件

                            this.drawingViewExtend(viewer2D);    // 監聽新增view完成的事件
                        }
                    },

                    failureCallback(error) {// 載入失敗回撥函式
                        console.log(error);
                    },

                    drawingViewExtend(viewer2D) {// 向量dwg擴充套件功能
                        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.getElementsByClassName('.bf-toolbar-bottom');

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

</body>
</html>

 

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

BIMFACE二次開發系列目錄     【已更新最新開發文章，點選檢視詳細】