在前一篇博客《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，所以可以采用下面的兼容性写法
1 <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script> 2 <!--[if IE 8]> 3 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 4 <![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("【警告】\r\n" + data.message); } }, error: function (e) { console.log(GetViewTokenHandler.ashx请求发生异常： + e); alert("【异常】\r\n" + 获取ViewToken发生异常); }, complete: function (XMLHttpRequest, status) { } }); }一般处理程序
using System; using System.Configuration; usingSystem.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; stringbimfaceAppKey = ConfigurationManager.AppSettings["BIMFACE_AppKey"]; stringbimfaceAppSecret = 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 { stringaccessToken = basicApi.GetAccessToken(bimfaceAppKey, bimfaceAppSecret).Data.Token;stringviewToken = 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 = newGlodon.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 = newGlodon.Bimface.Application.WebApplicationDrawingConfig(); webAppConfig.domElement = dom4Show; webAppConfig.viewToken = viewMetaData.viewToken; app =new Glodon.Bimface.Application.WebApplicationDrawing(webAppConfig); // 创建WebApplicationapp.load(viewMetaData.viewToken);//viewToken // 添加待显示的模型 viewer2D = app.getViewer();// 从WebApplication获取viewerDrawing对象 drawingViewExtend(viewer2D); // 监听添加view完成的事件 } }加载失败的回调函数
// 加载失败回调函数 function failureCallback(error) { console.log(error); }加载二维图纸的扩展方法
// 矢量dwg扩展功能 function drawingViewExtend(viewer2D) { varviewerEvents = Glodon.Bimface.Viewer.ViewerDrawingEvent;// 注册 ComponentsSelectionChanged ViewerDrawing图元点击选中事件 viewer2D.addEventListener(viewerEvents.ComponentsSelectionChanged, function () { //ToTo 通过图元ID找到图框ID }); // 注册 Loaded ViewerDrawing加载完毕事件 viewer2D.addEventListener(viewerEvents.Loaded, function () { vardom4Show =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。欢迎大家下载使用：https://gitee.com/NAlps/BIMFace.SDK
#张桂梅被写进中华人民共和国简史#
