前言:
如今朋友们对“ajax调用ashx方法”可能比较注重,大家都想要剖析一些“ajax调用ashx方法”的相关内容。那么小编在网络上搜集了一些有关“ajax调用ashx方法””的相关内容,希望同学们能喜欢,朋友们一起来了解一下吧!在之前的《C#开发BIMFACE系列》中主要介绍了BIMFACE平台提供的服务端API接口的封装开发与测试过程。
服务端API测试通过后,需要根据具体业务的需求集成到管理系统中,配合BIMFACE提供的前端JavaScript API的使用可以很轻松的集成到网页中实现模型/图纸的加载、浏览、批注对比等功能。
接下来的系列主要介绍网页集成开发方面的实现过程与经验。 本篇主要介绍如何在网页中加载与浏览BIM/CAD模型。
先展示网页中加载BIM模型的实际效果,如下图:
第1步:在页面中引用BIMFACE的JS文件。
<script src=";></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人失踪#
#俄投弹警告英国拒承认?专家分析#
#高考查分时都是什么反应#
#俄外交部:英军舰黑海犯界系挑衅#
标签: #ajax调用ashx方法