Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >C#开发BIMFACE系列37 网页集成开发1:审图系统中加载模型或图纸

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

作者头像
张传宁IT讲堂
发布于 2020-03-18 09:14:47
发布于 2020-03-18 09:14:47
81200
代码可运行
举报
运行总次数:0
代码可运行

系列目录 【已更新最新开发文章,点击查看详细】

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

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"></script>

第2步:获取模型文件的ViewToken。

  BIMFACE模型的查看都是以ViewToken为依据,而不是模型的FileId,并且模型需要转换成功之后才能查看。

  使用JQuery的ajax技术调用获取模型/文件的ViewToken的接口

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 // 加载BIM模型
 2 function loadBimFile() {
 3     $.ajax({
 4         url: "Handlers/GetViewTokenHandler.ashx",
 5         data: { fileId: fileId },
 6         dataType: "json",
 7         type: "GET",
 8         async: false, //同步
 9         success: function (data) {
10             if (data.code == true) {
11                 showBimModel(data.viewToken);// 加载BIMFACE模型
12             } else {
13                 $.messager.alert('提示', data.message, 'warning');
14             }
15         },
16         error: function (e) {
17             $.messager.alert('提示', e, 'error');
18         }
19     });
20 }
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
GetViewTokenHandler.cs 中的代码逻辑如下:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 /// <summary>
 2 /// 获取BIMFACE模型的 viewToken
 3 /// </summary>
 4 public class GetViewTokenHandler : IHttpHandler
 5 {
 6     public void ProcessRequest(HttpContext context)
 7     {
 8         //context.Response.ContentType = "text/plain";
 9         //context.Response.Write("Hello World");
10         context.Response.ContentEncoding = Encoding.UTF8;
11 
12         string bimfaceAppKey = ConfigurationManager.AppSettings["BIMFACE_AppKey"];
13         string bimfaceAppSecret = ConfigurationManager.AppSettings["BIMFACE_AppSecret"];
14         if (bimfaceAppKey.IsNullOrWhiteSpace())
15         {
16             LogUtility.Error("web.config 中未配置 BIMFACE_AppKey。");
17         }
18         if (bimfaceAppSecret.IsNullOrWhiteSpace())
19         {
20             LogUtility.Error("web.config 中未配置 BIMFACE_AppSecret。");
21         }
22 
23         string fileId = context.Request["fileId"];
24         IBasicApi basicApi = new BasicApi();
25         try
26         {
27             string accessToken = basicApi.GetAccessToken(bimfaceAppKey, bimfaceAppSecret).Data.Token;
28             string viewToken = basicApi.GetViewTokenByFileId(accessToken, fileId.ToLong()).Data;
29 
30             var response = new
31             {
32                 code = true,
33                 message = "",
34                 viewToken = viewToken
35             };
36 
37             context.Response.Write(response.SerializeToJson());
38         }
39         catch (Exception ex)
40         {
41             var response = new
42             {
43                 code = false,
44                 message = "获取模型ViewToken失败。",
45                 viewToken = ""
46             };
47 
48             context.Response.Write(response.SerializeToJson());
49 
50             LogUtility.Error("GetViewTokenHandler 产生异常:" + ex);
51         }
52 
53         context.Response.End();
54     }
55 
56     public bool IsReusable
57     {
58         get
59         {
60             return false;
61         }
62     }
63 }

其中第27行调用了获取 AccessToken 的接口,具体请参考我的博客《C#开发BIMFACE系列3 服务端API之获取应用访问凭证AccessToken》

第28行调用了获取 ViewToken 的接口,具体请参考我的博客《C#开发BIMFACE系列15 服务端API之获取模型的View token》

第3步:加载模型。

  调用BIMFACE的JavaScript PAI,实现模型加载。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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)调用 BimfaceSDKLoaderConfig() 类做加载前的配置,设置 viewTkon即可。

 (2)调用 BimfaceSDKLoader.load() 方法,加载配置项。该方法提供了2个回调函数,一个是成功回调函数,一个是失败回调函数。

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1  <div id="bimContainer" class="viewer-wrap">
2  </div>

模型分为2种,3DView 表示三维模型;drawingView 表示二维图纸。

如果模型加载失败,则执行失败回调函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1 // 加载失败回调函数
2 function failureCallback(error) {
3     console.log(error);
4 }

第4步:浏览模型。

(1)目录树

  目录树分4类显示,分别是:构建、系统、空间、图纸。

其中“构建”菜单显示了该模型的所有构建分类与组成详情。

其中“图纸”菜单显示了该模型的对应的而二维图纸。前提是模型中要包含二维图纸,且在转换时需要设置把选项控制导出图纸。

(2)导航

提供了查看模型的上、下、左、右、前、后以及主视角等功能。

提示:键盘上的 Q、W、E、A、S、D 也可以操作模型以不同的视角呈现模型。

(3)工具栏

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

系列目录 【已更新最新开发文章,点击查看详细】

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-03-04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸
在前一篇博客《C#开发BIMFACE系列49 Web网页集成BIMFACE应用的技术方案》中介绍了目前市场主流的Web开发技术与应用框架,其中前端脚本的应用在国内分2大派系 jQuery 与 Vue.js。
张传宁IT讲堂
2021/10/21
8800
C#开发BIMFACE系列51 Web网页中使用Vue.js加载模型与图纸
在前一篇博客《C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸》中详细介绍了在网页中使用jQuery加载模型与图纸
张传宁IT讲堂
2021/10/21
1.4K0
C#开发BIMFACE系列46 服务端API之离线数据包下载及结构详解
在前一篇博客《C#开发BIMFACE系列45 服务端API之创建离线数据包》中通过调用接口成功的创建一个离线数据包
张传宁IT讲堂
2021/10/18
6920
C#开发BIMFACE系列42 服务端API之图纸对比
在我的前一篇博客《C#开发BIMFACE系列41 服务端API之模型对比》中详细介绍了BIMFACE服务端接口模型对比的功能。 BIMFACE官方文档提供的三维模型对比接口同样也适用于二维CAD图纸对比。下图中是官方提供的对比示例程序。
张传宁IT讲堂
2021/10/13
6240
C#开发BIMFACE系列45 服务端API之创建离线数据包
BIMFACE的常规应用方式有公有云与私有化部署两种方式,并且浏览模型或者图纸需要使用ViewToken,ViewToken 有效期为12小时,过期后需要调用接口重新生成。该过程稍微有点麻烦且性能可能受到网络等环境的影响。本文介绍第三种更加便捷高效的方式。
张传宁IT讲堂
2021/10/18
3750
C#开发BIMFACE系列15 服务端API之获取模型的View token
在《C#开发BIMFACE系列3 服务端API之获取应用访问凭证AccessToken》中详细介绍了应用程序访问API的令牌凭证。我们知道 Access token 代表自身应用的身份,使用应用的 appkey, secret,通过调用/oauth2/token接口获取。BIMFACE所有的接口调用都需要传递 Access token 。
张传宁IT讲堂
2019/09/18
6580
C#开发BIMFACE系列39 网页集成开发3:审图系统中三维模型比对
  在建筑施工图审查系统中,设计单位提交设计完成的模型/图纸,审查专家审查模型/图纸。审查过程中如果发现不符合规范的地方,则流程退回到设计单位,设计单位人员根据审查意见重新调整设计,调整完成后再次提交到审查专家。此时为了便于专家审查,需要知道当前轮次的模型/图纸与上一轮次的模型/图纸发生了哪些异动,针对异动情况进行审查即可。
张传宁IT讲堂
2020/04/30
4410
C#开发BIMFACE系列39 网页集成开发3:审图系统中三维模型比对
C#开发BIMFACE系列26 服务端API之获取模型数据11:获取单个面积分区信息
在《C#开发BIMFACE系列25 服务端API之获取模型数据9:获取楼层对应面积分区列表》一文中介绍了如何获取单个模型中单个楼层包含的面积分区列表。有了面积分区列表之后,即可查询单个面积分区的具体信息。
张传宁IT讲堂
2019/09/18
4360
C#开发BIMFACE系列26 服务端API之获取模型数据11:获取单个面积分区信息
C#开发BIMFACE系列31 服务端API之模型对比2:获取模型对比状态
  在上一篇《C#开发BIMFACE系列30 服务端API之模型对比1:发起模型对比》中发起了2个模型对比,由于模型对比是在BIMFACE云端进行的,通常需要5~10分钟。当模型对比完成后,BIMFACE通过回调机制通知对比结果。
张传宁IT讲堂
2020/03/18
5360
C#开发BIMFACE系列30 服务端API之模型对比1:发起模型对比
  在实际项目中,由于需求变更经常需要对模型文件进行修改。为了便于用户了解模型在修改前后发生的变化,BIMFACE提供了模型在线对比功能,可以利用在线的模型对比接口,通过简单的四个步骤实现模型在线对比。模型对比可以对两个文件/模型进行差异性分析,确定两个文件/模型之间构件的几何和属性差异,包括增加的构件、删除的构件和修改的构件。 模型对应可以用于进行文件/模型的版本对比。
张传宁IT讲堂
2020/03/18
4680
C#开发BIMFACE系列43 服务端API之图纸拆分
在上一篇博客《C#开发BIMFACE系列42 服务端API之图纸对比》的最后留了一个问题,在常规业务场景下,一个.dwg文件中包含多个图框,如下图
张传宁IT讲堂
2021/10/15
4140
C#开发BIMFACE系列27 服务端API之获取模型数据12:获取构件分类树
BIMFACE官方示例中,加载三维模型后,模型浏览器中左上角默认提供了“目录树”的功能,清晰地展示了模型的完整构成及上下级关系。
张传宁IT讲堂
2019/09/18
9340
C#开发BIMFACE系列27 服务端API之获取模型数据12:获取构件分类树
C#开发BIMFACE系列18 服务端API之获取模型数据3:获取构件属性
请求地址:GET https://api.bimface.com/data/v2/files/{fileId}/elements/{elementId}
张传宁IT讲堂
2019/09/18
6380
C#开发BIMFACE系列18 服务端API之获取模型数据3:获取构件属性
C#开发BIMFACE系列1 BIMFACE 简介
BIMFACE 是广联达公司旗下的一款具有完全自主知识产权的BIM轻量化引擎,建筑行业的软件开发者可在BIMFACE所提供的基础功能上进行二次开发,为终端用户提供更加丰富、更有价值的BIM应用。
张传宁IT讲堂
2019/09/18
1.4K0
C#开发BIMFACE系列1 BIMFACE 简介
C#开发BIMFACE系列38 网页集成开发2:审图系统中的模型或图纸批注
在运维或协同的场景中,经常需要对模型或图纸进行批注,及时记录已发现的问题并交给相关负责的人员。
张传宁IT讲堂
2020/03/18
9980
C#开发BIMFACE系列38 网页集成开发2:审图系统中的模型或图纸批注
C#开发BIMFACE系列11 服务端API之源文件删除
通过BIMFACE控制台或者调用服务接口上传文件成功后,如果不再需要该文件,则可以通过BIMFACE平台提供的“源文件删除”服务接口删除具体的文件。下面详细介绍其使用方法。
张传宁IT讲堂
2019/09/18
4630
C#开发BIMFACE系列11 服务端API之源文件删除
C#开发BIMFACE系列8 服务端API之获取文件上传状态信息
在BIMFACE控制台上传文件,上传过程及结束后它会自动告诉你文件的上传状态,目前有三种状态:uploading,success,failure。即上传中、上传成功、上传失败。
张传宁IT讲堂
2019/09/18
5150
C#开发BIMFACE系列8 服务端API之获取文件上传状态信息
C#开发BIMFACE系列40 服务端API之模型集成
  随着建筑信息化模型技术的发展,越来越多的人选择在云端浏览建筑模型。现阶段的云端模型浏览大多是基于文件级别,一次只可以浏览一个模型文件中的内容。而在工程项目模型设计的过程中,通常由多个设计师协同设计,不同的设计师负责不同的专业领域(例如建筑、结构、水电等)。如果想要在云端浏览整个项目工程,就需要把这些组成部分集成起来一起展示。更近一步,如果要在集成的模型之上进行业务集成的话,就要求在集成过程中对构件按单体,楼层,专业,构件分类,系统类型等进行分类或映射。
张传宁IT讲堂
2021/10/13
5860
C#开发BIMFACE系列29 服务端API之获取模型数据14:获取图纸列表
一个三维模型中可能包含对应多张二维图纸列表,本篇主要介绍如何获取模型文件对应的图纸列表。
张传宁IT讲堂
2019/09/18
5620
C#开发BIMFACE系列29 服务端API之获取模型数据14:获取图纸列表
C#开发BIMFACE系列41 服务端API之模型对比
  在建筑施工图审查系统中,设计单位提交设计完成的模型/图纸,审查专家审查模型/图纸。审查过程中如果发现不符合规范的地方,则流程退回到设计单位,设计单位人员根据审查意见重新调整设计,调整完成后再次提交到审查专家。此时为了便于专家审查,需要知道当前轮次的模型/图纸与上一轮次的模型/图纸发生了哪些异动,针对异动情况进行审查即可。
张传宁IT讲堂
2021/10/13
3770
推荐阅读
相关推荐
C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验