C#二次开发BIMFACE系列37 网页集成开发1审图系统中加载模型或图纸

在之前的《C#开发BIMFACE系列》中主要介绍了BIMFACE平台提供的服务端API接口的封装开发与测试过程。

服务端API测试通过后，需要根据具体业务的需求集成到管理系统中，配合BIMFACE提供的前端JavaScript API的使用可以很轻松的集成到网页中实现模型/图纸的加载、浏览、批注对比等功能。

接下来的系列主要介绍网页集成开发方面的实现过程与经验。 本篇主要介绍如何在网页中加载与浏览BIM/CAD模型。

先展示网页中加载BIM模型的实际效果，如下图：

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

<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"></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）工具栏

从左向右一次是：主视角、框选、测量、剖切、漫游模式、地图、构建详情、设置、基本信息、全屏。

系列文章主要技术：BIM、轻量化引擎、BIMFACE、BIMFACE二次开发、C#、.NET、二次开发、RESTful API、WebAPI

欢迎关注、点赞、评论、转发，每天都能获取优质内容。

回复101，或者私信作者获取《BIMFACE二次开发C#版SDK》。

#多地公布高考分数线#

#美国公寓倒塌已致3死99人失踪#

#俄投弹警告英国拒承认？专家分析#

#高考查分时都是什么反应#

#俄外交部：英军舰黑海犯界系挑衅#