EDA Viewer集成手册

1. 快速接入

将Viewer资源包存放到业务端项目中，资源包截图如下：

创建网页集成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代表可以进行后续操作
	},
}

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

2. 控制类方法和对外方法详细说明

控制类方法详细说明：


属性	类型	说明	回调参数
src	String	设置EDA Viewer轻量化文件路径，一般为文件夹根目录	---
allTags	Arrary	批注集合，在模型init加载前进行设置，用于回显批注。详情参考批注集成说明，或批注完整功能集成说明文档	---
fingerHttp	String	云API地址	---
checkEvent	Function(id, cc)	菜单按钮点击通知事件。id：菜单唯一id cc：回调函数，执行传入true可进行下一步操作，如cc(true)	---

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

3. 批注集成说明

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

批注接口代码示例：

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);
   },
    
  /** 其它方法 */
  ...
}

批注单条样例截图：