EDA Viewer集成手册

1. 快速接入

  1. 将Viewer资源包存放到业务端项目中，资源包截图如下：
  2. 创建网页集成Viewer资源，代码参考如下：

    注：demo_0.html，viewer.js用来模拟业务端集成，其余资源均为Viewer资源包，更换版本时替换Viewer资源包即可。

    demo_0.html代码示例：

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<title>预览模型</title>
	<style>
		html, body, #iframeDiv,iframe  { position: relative; height: 100%; width: 100%; width: 100%; height: 100%; border: none; margin: 0; padding: 0; overflow-y: hidden; }
	</style>
</head>

<body>
	<!-- 用于放模型展示的iframe，id不能修改 -->
	<div id="iframeDiv"> </div>
</body>
<!-- 引入公共控制类，用于控制模型外部数据传递-->
<script src="viewer.js"></script>
<script>
	window.onload = function () {
		nd_viewCtrl.init({
			src: ./models,		// 轻量化文件路径
		});	
	}
</script>

</html>

    viewer.js最简代码示例：

    
var nd_viewCtrl = {
	src: '',
	fingerHttp: '',
	init: function (opt) {
		this.ecadPath = opt.ecadPath;
		document.querySelector("#iframeDiv").innerHTML = '<iframe id="viewer" src="index.html" allowFullScreen></iframe>';
	},
	checkEvent: function (id, cc) { 								// *控制按钮点击后是否能操作
		console.log("📌checkEvent id: ", id);
		cc && cc(true);		// 传true代表可以进行后续操作
	},
}
  3. 加载模型。

    在 window.onload 事件中调用控制类方法 nd_viewCtrl.init 即可进行模型加载。

2. 控制类属性和方法详细说明

控制类属性说明：

属性 类型 说明 回调参数
src String 设置EDA Viewer轻量化文件路径，一般为文件夹根目录。 ---
allTags Array 批注集合，在模型init加载前进行设置，用于回显批注。详情参考批注集成说明。 ---
fingerHttp String 云API地址。 ---
hideTagList Array 设置隐藏的批注id集合。 ---
settingsItem Object 测量设置项，详情可参考设置功能集成说明。 ---
panelItem Object 设置回显面板信息，详情可参考设置功能集成说明。 ---
measureList Array 设置回显测量信息，详情可参考测量功能集成说明。 ---
viewports Array 设置回显视图信息，详情可参考视图功能集成说明。 ---

控制类方法详细说明：

方法 类型 说明 回调参数
checkEvent Function(id, cc) 菜单按钮点击通知事件。
id：菜单唯一id
cc：回调函数，执行传入true可进行下一步操作，如cc(true)		 ---
measureChange Function(info, cc) 操作测量时通知测量信息。
info：测量操作信息
cc：回调函数，执行后通知操作完成		 ---
addModelview function(info, i, cc) 添加视图时触发，通知视图信息。
info：视图信息
i：视图截图信息，base64格式
cc：回调函数，执行后通知操作完成		 ---
delModelview Function(id, cc) 删除视图时触发，通知视图信息。
id：视图唯一id
cc：回调函数，执行后通知操作完成		 ---
renameModelview Function(id, viewport) 重命名视图时触发，通知视图信息。
id：视图唯一id
viewport：视图信息		 ---
hideTagsChange Function(ids) 隐藏指定批注时触发。
ids：隐藏批注的唯一id集合		 ---
settingsChange Function(info) 设置信息改变时触发，通知设置项信息。
info：设置相关信息		 ---
panelChange Function(info) 切换面板时触发，通知面版信息。
info：面版相关信息		 ---

其它方法参考3D配置文档，部分接口EDA也能使用。

3. 批注集成说明

注：详情或代码示例可参考3D批注集成文档；3D、2D EDA添加的批注，预览时只显示对应模型下添加的批注。

Figure 1. 交互流程截图：

批注接口代码示例：

var nd_viewCtrl = {
  ...
  /** 控制类属性 */
  allTags: [],                              // 设置初始化回显的引线批注和图文批注数据集合
    
  /** 控制类方法 */
  tagOperateAdd: function(info, cc) {		// 添加批注，info：批注相关信息，参考下面截图，cc：回调函数，第一个参数是图片地址，第二个是视频地址，引线批注传入failed时撤销批注操作
	cc && cc(info.imageFile, info.videoFile);
  },
  
  tagOperateEdit: function(info, cc) {		// 编辑批注，info：批注相关信息，参考下面截图，cc：回调函数，第一个参数是图片地址，第二个是视频地址，，引线批注传入failed时撤销批注操作
	cc && cc(info.imageFile, info.videoFile);
  },
  
  beDelTag: function (uid, cc) {            // 删除批注，uid：删除批注的tagId，cc：回调函数
      cc && cc();
  },
  
  beSelectTag: function (i) {               // 预览打开图文批注的回调，i：预览批注的tagId
  },

  /** 控制类接口 */
  delTags: function (uuid) {                // 主动删除viewer内批注，uuid：批注的tagId
		var _contentWindow = document.getElementById("viewer").contentWindow;
		_contentWindow && _contentWindow.nd_delTags(uuid);
  },
  selectTag: function (uuid) {              // 主动预览viewer内批注，uuid：批注的tagId
		var _contentWindow = document.getElementById("viewer").contentWindow;
   		_contentWindow && _contentWindow.nd_selectTag(uuid);
   },
    
  /** 其它方法 */
  ...
}

批注单条样例截图：

4. 测量功能集成说明

注：在Viewer中操作测量时，通过measureChange接口获取测量数据，存储后的测量集合数据可通过设置measureList进行回显。

4.1 info信息截图

注：type为操作类型，data为测量数据。data中viewType用以区分是3D还是2D数据，3D、2D数据互不影响。

Figure 2. Info信息截图

4.2 测量信息type类型枚举

type类型 说明
add 3D、2D添加测量时触发，data数据类型为object
addContinuous 2D添加连续测量时触发，data数据类型为Array，连续测量相当于添加多条测量信息
edit 2D编辑测量信息时触发，data数据类型为object
editList 2D批量编辑批注时触发，data数据类型为Array
delete 3D、2D删除单条数据时触发，2D的data数据类型为object，3D使用delList
deletes 2D测量列表中删除多条数据时触发，data数据类型为Array，是一组删除测量数据uuid的集合
clear 3D清空测量数据时触发，数据类型为object，读取其中measureId为删除测量数据的uuid集合

5. 视图功能集成说明

注：可参考视图完整功能集成说明，EDA视图数据中有属性viewType，用以区分2D、3D视图数据。

6. 设置功能集成说明

注：对2D、3D调整设置项时会触发settingsChange接口通知设置信息，存储后的设置信息通过设置settingsItem进行设置回显。

6.1 settingsItem数据和settingsChange回调信息截图

注：设置项回显时，2D、3D分别设置在对应属性中。

Figure 3. SettingsItem数据截图
Figure 4. SettingsChange回调信息截图

6.2 settingsChange接口type枚举值

注：只通知当前2D、3D的设置项信息，在存储时，对之前数据进行覆盖以回显最新设置数据。

type枚举值 说明
setting2D 修改2D面板的设置项时触发，设置项包括测量设置项、背景色等；data数据类型为Array
setting3D 修改3D面板的设置项时触发，设置项包括单位、精度、背景等；data数据类型为Array

6.3 面板修改

注：3D、2D切换面板时会触发panelChange接口通知面板编号，通过panelItem设置默认回显的面板。切换面板回传的信息包含3D、2D的设置项，截图如下：

Figure 5. panelItem设置截图
Figure 6. 切换面板回传信息截图