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个目录是用于离线数据包功能，这里只需要把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("【警告】
" + data.message);
            }
        },
        error: function (e) {
            console.log('GetViewTokenHandler.ashx请求发生异常：' + e);
            alert("【异常】
" + '获取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二次开发系列目录     【已更新最新开发文章，点击查看详细】