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

系列目录【已更新最新开发文章，点击查看详细】在之前的《C#开发BIMFACE系列》中主要介绍了BIMFACE平台提供的服务端API接口的封装开发与测试过程。

文章图片

服务端API测试通过后，需要根据具体业务的需求集成到管理系统中，配合BIMFACE提供的前端JavaScript API的使用可以很轻松的集成到网页中实现模型/图纸的加载、浏览、批注对比等功能。
接下来的系列主要介绍网页集成开发方面的实现过程与经验。本篇主要介绍如何在网页中加载与浏览BIM/CAD模型。
先展示网页中加载BIM模型的实际效果，如下图：

文章图片

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

第2步：获取模型文件的ViewToken。
BIMFACE模型的查看都是以ViewToken为依据，而不是模型的FileId，并且模型需要转换成功之后才能查看。
使用JQuery的ajax技术调用获取模型/文件的ViewToken的接口

1 // 加载BIM模型 2 function loadBimFile() { 3$.ajax({ 4url: "Handlers/GetViewTokenHandler.ashx", 5data: { fileId: fileId }, 6dataType: "json", 7type: "GET", 8async: false, //同步 9success: function (data) { 10if (data.code == true) { 11showBimModel(data.viewToken); // 加载BIMFACE模型 12} else { 13$.messager.alert('提示', data.message, 'warning'); 14} 15}, 16error: function (e) { 17$.messager.alert('提示', e, 'error'); 18} 19}); 20 }

GetViewTokenHandler.cs 中的代码逻辑如下：

1 /// 2 /// 获取BIMFACE模型的 viewToken 3 /// 4 public class GetViewTokenHandler : IHttpHandler 5 { 6public void ProcessRequest(HttpContext context) 7{ 8//context.Response.ContentType = "text/plain"; 9//context.Response.Write("Hello World"); 10context.Response.ContentEncoding = Encoding.UTF8; 11 12string bimfaceAppKey = ConfigurationManager.AppSettings["BIMFACE_AppKey"]; 13string bimfaceAppSecret = ConfigurationManager.AppSettings["BIMFACE_AppSecret"]; 14if (bimfaceAppKey.IsNullOrWhiteSpace()) 15{ 16LogUtility.Error("web.config 中未配置 BIMFACE_AppKey。"); 17} 18if (bimfaceAppSecret.IsNullOrWhiteSpace()) 19{ 20LogUtility.Error("web.config 中未配置 BIMFACE_AppSecret。"); 21} 22 23string fileId = context.Request["fileId"]; 24IBasicApi basicApi = new BasicApi(); 25try 26{ 27string accessToken = basicApi.GetAccessToken(bimfaceAppKey, bimfaceAppSecret).Data.Token; 28string viewToken = basicApi.GetViewTokenByFileId(accessToken, fileId.ToLong()).Data; 29 30var response = new 31{ 32code = true, 33message = "", 34viewToken = viewToken 35}; 36 37context.Response.Write(response.SerializeToJson()); 38} 39catch (Exception ex) 40{ 41var response = new 42{ 43code = false, 44message = "获取模型ViewToken失败。", 45viewToken = "" 46}; 47 48context.Response.Write(response.SerializeToJson()); 49 50LogUtility.Error("GetViewTokenHandler 产生异常：" + ex); 51} 52 53context.Response.End(); 54} 55 56public bool IsReusable 57{ 58get 59{ 60return false; 61} 62} 63 }

其中第27行调用了获取 AccessToken 的接口，具体请参考我的博客《C#开发BIMFACE系列3 服务端API之获取应用访问凭证AccessToken》。
第28行调用了获取 ViewToken 的接口，具体请参考我的博客《C#开发BIMFACE系列15 服务端API之获取模型的View token》。
第3步：加载模型。
调用BIMFACE的JavaScript PAI，实现模型加载。

1 // 显示BIMFACE模型 2 function showBimModel(viewToken) { 3var loaderConfig = new BimfaceSDKLoaderConfig(); // 设置BIMFACE JSSDK加载器的配置信息 4loaderConfig.viewToken = viewToken; 5BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback); // 加载BIMFACE JSSDK加载器 6 }

　（1）调用 BimfaceSDKLoaderConfig() 类做加载前的配置，设置 viewTkon即可。
　（2）调用 BimfaceSDKLoader.load() 方法，加载配置项。该方法提供了2个回调函数，一个是成功回调函数，一个是失败回调函数。

1 // 加载成功回调函数 2 function successCallback(viewMetaData) { 3gc_viewType = viewMetaData.viewType; 4if (viewMetaData.viewType == "3DView") { 5// 获取DOM元素 6var dom4Show = document.getElementById('bimContainer'); 7var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig(); 8webAppConfig.domElement = dom4Show; 9 10// 创建WebApplication 11app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig); 12 13// 添加待显示的模型 14app.addView(temp_ViewToken); 15 16// 从WebApplication获取viewer3D对象 17viewer3D = app.getViewer(); 18} 19else if (viewMetaData.viewType == "drawingView") { 20// ======== 判断是否为矢量图纸 ======== 21// 获取DOM元素 22var dom4Show = document.getElementById('bimContainer'); 23var webAppConfig = new Glodon.Bimface.Application.WebApplicationDrawingConfig(); 24webAppConfig.domElement = dom4Show; 25webAppConfig.viewToken = viewMetaData.viewToken; 26 27// 创建WebApplication 28app = new Glodon.Bimface.Application.WebApplicationDrawing(webAppConfig); 29 30// 添加待显示的模型 31app.load(viewToken); 32 33// 从WebApplication获取viewerDrawing对象 34viewer2D = app.getViewer(); 35} 36 }

第6行获取的DOM元素是页面上的 div 容器，用于呈现模型适用。