C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸

时间:2022-09-07 19:38:16
BIMFACE二次开发系列目录     【已更新最新开发文章,点击查看详细】
C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸

在前一篇博客《C#开发BIMFACE系列49 Web网页集成BIMFACE应用的技术方案》中介绍了目前市场主流的Web开发技术与应用框架,其中前端脚本的应用在国内分2大派系 jQuery 与 Vue.js。

本篇博客主要介绍Web网页中使用jQuery加载模型与图纸以及其他的应用开发。

步骤1:下载并引用 jQuery.js

jQuery 官方目前发布的版本已经到3.X

C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸

但是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以上版本都可以,但是不要在兼容性视图下浏览模型或图纸。

C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸

步骤2:下载并引用 BIMFace JSSDK

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

C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸

下载的文件是一个压缩包,解压后目录结构如下:

C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸

另外2个目录是用于离线数据包功能,这里只需要把BimfaceSDKLoader@latest-release.js文件拷贝到项目中即可,建议增加文件版本号,修改为BimfaceSDKLoader@latest-release-3.6.159.js。有如下两种引用方式,选择任一种都可以。

方式1:引用本地文件

方式2:引用BIMFACE官方在线文件。优点:一直保持最新版本。

C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸

步骤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) { }
});
}

一般处理程序

 1 using System;
2 using System.Configuration;
3 using System.Text;
4 using System.Web;
5
6 using BIMFace.SDK.CSharp.API;
7 using BIMFace.SDK.CSharp.Common.Extensions;
8 using BIMFace.SDK.CSharp.Common.Log;
9
10 namespace BIMFace.SDK.CSharp.Sample.Handlers
11 {
12 /// <summary>
13 /// GetViewTokenHandler 的摘要说明
14 /// </summary>
15 public class GetViewTokenHandler : IHttpHandler
16 {
17
18 public void ProcessRequest(HttpContext context)
19 {
20 context.Response.ContentEncoding = Encoding.UTF8;
21
22 string bimfaceAppKey = ConfigurationManager.AppSettings["BIMFACE_AppKey"];
23 string bimfaceAppSecret = ConfigurationManager.AppSettings["BIMFACE_AppSecret"];
24 if (bimfaceAppKey.IsNullOrWhiteSpace())
25 {
26 LogUtility.Error("web.config 中未配置 BIMFACE_AppKey。");
27 }
28 if (bimfaceAppSecret.IsNullOrWhiteSpace())
29 {
30 LogUtility.Error("web.config 中未配置 BIMFACE_AppSecret。");
31 }
32
33 string fileId = context.Request["fileId"];
34 IBasicApi basicApi = new BasicApi();
35 try
36 {
37 string accessToken = basicApi.GetAccessToken(bimfaceAppKey, bimfaceAppSecret).Data.Token;
38 string viewToken = basicApi.GetViewTokenByFileId(accessToken, fileId.ToLong()).Data;
39
40 var response = new
41 {
42 code = true,
43 message = "",
44 viewToken = viewToken
45 };
46
47 context.Response.Write(response.SerializeToJson());
48 }
49 catch (Exception ex)
50 {
51 var response = new
52 {
53 code = false,
54 message = "获取模型ViewToken失败。",
55 viewToken = ""
56 };
57
58 context.Response.Write(response.SerializeToJson());
59
60 LogUtility.Error("GetViewTokenHandler 产生异常:" + ex);
61 }
62
63 context.Response.End();
64 }
65
66 public bool IsReusable
67 {
68 get
69 {
70 return false;
71 }
72 }
73 }
74 }
步骤4:根据ViewToken加载模型或者图纸

主要使用了JSSDK中的BimfaceSDKLoaderConfig类与BimfaceSDKLoader对象,所有逻辑代码如下

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

加载成功的回调函数

 1 // 加载成功回调函数
2 function successCallback(viewMetaData) {
3 /* modelViewer 是全局对象,它与具体的图纸或者模型一一对应。如果切换了图纸/模型,则需要将其重置,然后在后续操作中再创建。*/
4 modelViewer = {
5 toolbar: undefined, // 工具条
6 annotationmanager: undefined, // annotation的绘制管理器
7 annotationToolbar: undefined,
8 annotationControl: undefined // 重写annotation的保存、取消
9 };
10
11 var dom4Show = document.getElementById('bimContainer'); // 获取DOM元素
12
13 if (viewMetaData.viewType == "3DView") {
14 var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
15 webAppConfig.domElement = dom4Show;
16
17 app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig); // 创建WebApplication
18 app.addView(viewMetaData.viewToken);//temp_ViewToken // 添加待显示的模型
19
20 viewer3D = app.getViewer(); // 从WebApplication获取viewer3D对象
21
22 // 监听添加view完成的事件
23 viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
24 // 调用viewer3D对象的Method,可以继续扩展功能
25 modelViewer.toolbar = $(dom4Show).find('.bf-toolbar-bottom');
26
27 //自适应屏幕大小
28 window.onresize = function () {
29 viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40);
30 }
31 });
32
33
34 }
35 else if (viewMetaData.viewType == "drawingView") {
36
37 var webAppConfig = new Glodon.Bimface.Application.WebApplicationDrawingConfig();
38 webAppConfig.domElement = dom4Show;
39 webAppConfig.viewToken = viewMetaData.viewToken;
40
41 app = new Glodon.Bimface.Application.WebApplicationDrawing(webAppConfig); // 创建WebApplication
42 app.load(viewMetaData.viewToken);//viewToken // 添加待显示的模型
43
44 viewer2D = app.getViewer();// 从WebApplication获取viewerDrawing对象
45
46 drawingViewExtend(viewer2D); // 监听添加view完成的事件
47 }
48 }

加载失败的回调函数

1 // 加载失败回调函数
2 function failureCallback(error) {
3 console.log(error);
4 }

加载二维图纸的扩展方法

 1 // 矢量dwg扩展功能
2 function drawingViewExtend(viewer2D) {
3 var viewerEvents = Glodon.Bimface.Viewer.ViewerDrawingEvent;
4
5 // 注册 ComponentsSelectionChanged ViewerDrawing图元点击选中事件
6 viewer2D.addEventListener(viewerEvents.ComponentsSelectionChanged, function () {
7 //ToTo 通过图元ID找到图框ID
8 });
9
10 // 注册 Loaded ViewerDrawing加载完毕事件
11 viewer2D.addEventListener(viewerEvents.Loaded, function () {
12 var dom4Show = document.getElementById('bimContainer'); // 获取DOM元素
13 modelViewer.toolbar = $(dom4Show).find('.bf-toolbar-bottom');
14
15 //自适应屏幕大小
16 window.onresize = function () {
17 viewer2D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40);
18 }
19 });
20 }

关于BIMFACE集成应用开发,官方提供了非常丰富的示例程序,都是Web网页集成应用,具体参考 https://bimface.com/developer-jsdemo#1023

C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸

下一篇《C#开发BIMFACE系列51 Web网页中使用Vue.js加载模型与图纸》

《BIMFace.SDK.CSharp》开源SDK。欢迎大家下载使用。

C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸
BIMFACE二次开发系列目录     【已更新最新开发文章,点击查看详细】

C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸的更多相关文章

  1. C&num;开发BIMFACE系列53 WinForm程序中使用CefSharp加载模型图纸1 简单应用

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在我的博客<C#开发BIMFACE系列52 CS客户端集成BIMFACE应用的技术方案>中介绍了多种集成BIM ...

  2. C&num;开发BIMFACE系列49 Web网页中加载模型与图纸的技术方案

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在BIMFACE二次系列博客中详细介绍了服务器端API的调用方式,如下列表 C#开发BIMFACE系列1   BIMFAC ...

  3. Winform开发框架之客户关系管理系统&lpar;CRM&rpar;的开发总结系列4-Tab控件页面的动态加载

    在前面介绍的几篇关于CRM系统的开发随笔中,里面都整合了多个页面的功能,包括多文档界面,以及客户相关信息的页面展示,这个模块就是利用DevExpress控件的XtraTabPage控件的动态加载实现的 ...

  4. C&num;开发BIMFACE系列37 网页集成开发1:审图系统中加载模型或图纸

    系列目录     [已更新最新开发文章,点击查看详细] 在之前的<C#开发BIMFACE系列>中主要介绍了BIMFACE平台提供的服务端API接口的封装开发与测试过程. 服务端API测试通 ...

  5. 详解web&period;xml中元素的加载顺序

    一.背景 最近在项目中遇到了启动时出现加载service注解注入失败的问题,后来经过不懈努力发现了是因为web.xml配置文件中的元素加载顺序导致的,那么就抽空研究了以下tomcat在启动时web.x ...

  6. C&num;开发BIMFACE系列52 CS客户端集成BIMFACE应用的技术方案

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在我的博客<C#开发BIMFACE系列49 Web网页集成BIMFACE应用的技术方案>.<C#开发BI ...

  7. 服务器启动时Webapp的web&period;xml中配置的加载顺序

    一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...

  8. 服务器启动时Webapp的web&period;xml中配置的加载顺序&lpar;转载)

    一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...

  9. 关于web项目中静态资源加载不了的一些解决思路

    问题的产生: <!--springMVC前端控制器加载--> <servlet> <servlet-name>springmvc</servlet-name& ...

随机推荐

  1. 《UNIX环境高级编程》笔记——3&period;文件IO

    一.引言 说明几个I/O函数:open.read.write.lseek和close,这些函数都是不带缓冲(不带缓冲,只调用内核的一个系统调用),这些函数不输入ISO C,是POSIX的一部分: 多进 ...

  2. Splinter学习——不仅仅是自动化测试哦

    前两天,想抢购一个小米MIX,结果,一开始抢就没有了.于是想,作为程序猿,总得有点特殊手段吧,比如说一个小脚本.最近在学习python,百度了一下,发现了Splinter这个强大的东东!用了不到两小时 ...

  3. C&num;获取并写入ORACLE数据库中中英文字符集问题

    背景: 开发语言:C# 开发工具:VS2010 A方ORACLE数据库:中文字符集 B方ORACLE数据库:英文字符集 传递方式:webservice方式(取数据,并把取出的数据放到DataTable ...

  4. M4&colon; 使用CommandBar

    本小节将介绍如何使用CommandBar, CommandBar分为PrimaryCommands和SecondaryCommands,在PrimaryCommands中不要放置多于四个按钮.然后将不 ...

  5. Inventory Pro 装备拾取的实现

    以后都按照插件使用,提出问题,回答问题的方式来进行总结和学习 效果图 1.运行相关的例子,场景中出现4个矩形,这4个矩形是用来模拟物品掉落的包裹,移动Player靠近物品 2.使用鼠标点击物品正方体, ...

  6. Android 5&period;0 技术新趋势

    由于 Android 的版本分裂比较严重,整个新系统升级可能需要一两年甚至更长时间.所以目前使用 Android 5.0 的大部分是喜欢尝鲜的用户,同时现在市场上能够很好支持 Android 5.0 ...

  7. JVM——深入分析对象的内存布局

    概述 一个对象本身的内在结构需要一种描述方式,这个描述信息是以字节码的方法存储在方法区中的.Class本身就是一个对象,都以KB为单位,如果new Integer()为了表示一个数据就占用KB级别的内 ...

  8. 安卓开发中Spinner控件的使用

    在安卓手机应用开发中,Spinner对象常用方法有以下五种. 用法 1 :以资源方式,静态展示 Spinner 选项 用法 2 :以代码方式,动态展示 Spinner 选项 用法 3 :同时显示图片和 ...

  9. Hibernate 离线对象构建通用查询

    1.业务场景 当下主系统衍生子业务系统已经成为常态,像京东的物流和金融,阿里的支付宝和淘宝. 子业务系统需要对主系统的资源进行访问,这里的资源我具体化为数据库数据,但日常业务中可能不只是数据. 抽象服 ...

  10. Java学习第一篇 — 字符串

    package StringTest; public class TestString { public static void main(String[] args){ // String str= ...