3D Viewer组件

1. 快速上手指南

1.1 创建一个空项目用于加载viewer



1.2 demo.html参考示例

说明：demo.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>3D预览模型</title>
    <style>
        html,
        body,
        #iframeDiv,iframe  { position: relative; height: 100%; width: 100%; width: 100%; height: 100%; border: none; margin: 0; padding: 0; }
    </style>
</head>
<body>
    <!-- 用于放模型展示的iframe，id不能修改 -->
    <div id="iframeDiv"> </div>
</body>
<!-- 引入公共控制类，用于控制模型外部数据传递-->
<script src="viewer.js"></script>
<script>
    window.onload = function () {
  		// 设置初始化属性
  		nd_viewCtrl.fingerHttp = ''; // 设置私有化部署域名，如：http://192.1.1.1:8000
        // 加载viewer模型
        nd_viewCtrl.init({
            src: 'models/bim/',// 轻量化文件所在文件夹路径
          	loadedBack: () => {	
              nd_viewCtrl.screenshot((imgUrl) => {	// 在模型加载完成后进行截图
                console.log('截图信息：', imgUrl);
              })
            }
        });    
    }
</script>
</html>

1.3 viewer.js参考示例

说明：viewer.js用于声明一个 nd_viewCtrl 控制类对象，它包含丰富的功能配置，详细配置参考2.3和2.4。

基础配置代码参考如下：

var nd_viewCtrl = {
	src: '', // 轻量化地址
	allTags: [], // 批注信息
	hidebtnCfg: [],// 隐藏viewer中的功能按钮，对应按钮id
	_opt:{},
	fingerHttp: '', // 私有化部署域名，如：http://192.1.1.1:8000
  	/** 初始化方法 */
	init: function (opt) {
      	// 根据init传入的内容在控制类中进行赋值
		this.src = opt.src;
		this._opt = opt;
		this.allTags = opt.tags;
      	// 加载viewer资源。src路径填写实际存放viewer资源的地址
		document.querySelector("#iframeDiv").innerHTML = 
          '<iframe id="viewer" src="3DViewer/index.html" allowFullScreen></iframe>';
	},
  	/** 模型加载完成回调方法 */
  	initLoad: function () { //加载完成
		console.log('model loaded!');
		this.getInstance();
		this._opt && this._opt.loadedBack && this._opt.loadedBack();
	},
  	/** 截图方法参考 */
  	screenshot: function (callBack) {
      	// 获取viewer全局对象
		var _contentWindow = document.getElementById("viewer").contentWindow;
		if (_contentWindow) {
          	// 调用viewer方法
			_contentWindow.nd_screenCapture(function (base64Img) {
				callBack&&callBack(base64Img);
				console.log(base64Img);
			});
		}
	},
  	/** 其它方法 */
  	...
}

1.4 3DViewer参考示例

说明：3DViewer是一个文件夹，它用于存放viewer的加载资源。
内容参考截图如下：

2. viewer.js控制类配置说明

说明：viewer.js 中会创建一个基础控制类 nd_viewCtrl，它用于业务系统和 viewer 之间，进行模型初始化，进行功能和数据交互。

2.1 控制类属性分类

控制类属性可以分为三种不同类型的属性：

  • 初始化时设置的属性参数，如 src，allTags 等。注：在 init 之前将参数设置好才会生效。
  • 主动调用 viewer 的方法，如 screenshot() 等。注：通过 viewer 的全局对象即可调用 viewer 提供的方法，参考截图操作。
  • 被动收到 viewer 通知的方法，如 initLoad()，addTags() 等。注：被动接受指的是 viewer 会主动触发 nd_viewCtrl 中的某些方法，并将关键信息通过参数的方式回调出来。

2.2 控制类init方法调用

init 是初始化 viewer 的重要方法，传入关键参数和回调，页面即可开始预览模型。
注：init 方法是 nd_viewCtrl 控制类中的一个属性方法。它可以接受一些传参，将一些需要的属性重新赋值到 nd_viewCtrl 控制类上，集成方可以在此方法中根据业务需求调整逻辑。
init 方法内容参考1.3中的示例，init 调用代码参数如下：

nd_viewCtrl.init({
  src: 'models/bim_32/',//轻量化文件所在文件夹路径 
  tags:[],//批注数据
  loadedBack:function(){//模型加载成功触发的通知
  }   
});

2.3 控制类属性详细说明

说明：可通过设置控制类属性，配置viewer提供的功能。可分为常规属性参数和方法类属性参考，详情见下面参数配置。 常规属性参数，详细设置如下：

属性 说明 类型 可选值 默认值
src 设置模型地址 String 必填，如：相对路径，绝对路径，http地址 -
fingerHttp 设置云api地址 String 非必填，如：http地址 -
viewState 设置显示模式 String 非必填，配置见显示设置枚举值 shadedWithEdges
configNum 设置多配置模型默认显示第几个配置 Number 非必填，如：0，1，2等 -1
language 中英文配置 String 非必填，如zh，en zh
disratio 设置视角缩放系数。
值小于1时，模型比默认大，值越小模型越大。
值大于1时，模型比默认小，值越大模型越小。		 Number 非必填，如：大于0的数字 1
angles 设置旋转角度，可配置模型分别在x、y、z轴逆时针旋转的度数 Array 非必填，[x,y,z] 数值应为在-180到180之间的整数 -
defaultStandardView 设置视图，优先级低于angles，angles有值时视图参数不生效 String 非必填，配置见视图参数枚举值 -
bgColor 设置背景颜色，优先级低于bgImg，bgImg有值时背景颜色不生效 String 非必填，十六进制颜色值或者RGB值，例如#F8F8FF或者248,248,255 #F2F2F2
bgImg 设置背景图片 String 非必填，图片地址，注意图片的访问权限 -
showBtnCfg 设置工具栏按钮集合，按顺序排列，用于显示需要的操作按钮，传值为对应按钮id，按按钮显示顺序排列 Array 非必填，配置见枚举值 不做设置的时默认显示所有项
hidebtnCfg 设置功能按钮隐藏，showbtnCfg未定义或者空时生效 Array 非必填，隐藏按钮的id合集，配置见枚举值 -
hideEstimateBox 设置隐藏体积面积卡片信息 Boolean 非必填，true/false false
tagRelateConfig 设置多配置下批注点是否关联配置 Boolean 非必填，true/false false
hideRightkeyBtnClass 设置隐藏右键选项 Array 非必填，["all"] 表示隐藏所有，配置见鼠标右键枚举值 []
needShowPreviewLink 设置右键菜单preview-link是否显示，优先级低于hideRightkeyBtnClass Boolean 非必填，true/false false
viewerBoxStyle 设置立方体位置 Object 非必填，如：{top: '70px', right: '6px'} -
allTags 设置初始化时批注数据，需要与图文或引线批注接口配合使用 Array 非必填，[] []
allLineTags 设置初始化时引线批注数据，需要与引线批注接口配合使用 Array 非必填，[] []
unitType 设置模型单位 String 非必填，原始模型的单位：' '，
毫米(公制单位)：'mm'，
英尺(英制单位)：'in'		 -
autoOpenStruct 设置是否默认打开结构树 Boolean 非必填，true/false false
setStructWidth 设置结构树默认打开宽度 Number 非必填，参考值：500 -
structAttrList 设置一个属性名数组，使结构树名称显示为“名称+属性值” Array 非必填，属性名如: ['材料','别名'] -
logoConfig 配置logo参数，规则：
1. 不传入src将无法预览；
2. 不传入width,height以图片宽高为准；
3. 不传入位置默认距离底部85px，距离左侧16px；
4. 同时传作左右或上下，优先读取左和下，只传一个就读取一个值		 Object 非必填，如：
{
src: 'http://****', 
left: '100px', 
bottom: '100px'
}

src：图片地址；
top：距离顶部距离与bottom互斥；
left：距离左侧距离，与right互斥；
width，height：宽高设置		 -
userInfo 配置用户信息，可在批注列表进行用户信息显示，属性包括，userName：用户名 Object 非必填，如：{ userName: '吕布' } -
waterInfo 设置水印信息，如水印字体大小，水印横行纵向距离等 Object 非必填，如：
{
text : "水印", 
font : "Microsoft YaHei", 
fontSize: 18, 
bold: true, 
xstart: 16, 
ystart: 85, 
interval_v: 100, 
interval_h: 150, 
color: '#ff0000', 
angle: 25, 
transparent: 0.1, 
brepeat: true, 
imageSize: 200, 
imageSrc: ''
}
 -
measureList 设置回显测量数据，数组集合 Array 非必填，如：[item1, item2, ...] -
setBoxHide 设置立方体隐藏 Bool 非必填，默认false，设置true会隐藏立方体 -
setBottomToolHide 设置底部工具栏隐藏 Bool 非必填，默认false，设置true会隐藏底部工具栏 -
themeMenu 配置主题功能图标文件夹名称，与ico-zh同级，功能图标会优先从配置的文件夹名称中读取 String 非必填，如：test -
viewports 初始化时设置视图列表信息。配合视图相关接口使用 Array 非必填，如[] -

方法类属性参数，详细设置如下：

方法名 方法说明 入参 入参说明 返回值
initLoad 模型加载完成的通知 - - -
loadFaild 模型加载失败的通知 - - -
loadedEvent 模型加载过程的通知 Function(info) geometry，brep，pmi信息加载完成后会进行通知 -
checkEvent 菜单按钮点击前触发的通知 Function(id,cc) id：菜单按钮的唯一标识,
cc：回调函数，执行后才能进入菜单功能		 -
checkEventAfter 菜单按钮点击生效后触发的通知 Function(id) id：菜单按钮的唯一标识 -
prepareModelCallBack 模型加载前回调结构树信息，此方法中可控制节点显示隐藏 Function(tree) tree：结构树信息，通过信息中的objectId可以在模型加载前设置节点显示隐藏 -
measureChange 测量信息变动，新增或删除时触发，返回单条测量数据和操作类型 Function(info) info：单条测量数据
info.type：add为新增，delete为删除，clear为删除当前配置数据
info.data：测量数据内容，
例如，
{
"measureId": "9d99cd57-6a0a-405a-871f-f9c947051b30",
"measureType": "measureEdges", // 参考5枚举值
"measureNumResult": "420.13015747",
"defaultUnit": "mm",
"configNum": 0,
"configName": "默认",
"measureContent": 
}
 -
saveMeasureInfo 保存测量信息，在测量菜单进行返回时才触发此方法 Function(info,cc) info：测量信息集合cc：回调函数，执行后通知viewer测量信息已保存 -
animationFinished 动画播放完成回调 Function(type) type：2-往复，1-循环，0-正常 -
addModelview 添加视图回调 Function(d, i, cc) d：视图信息
i：截图信息
cc：回调函数		 -
delModelview 删除视图回调 Function(id, cc) id：视图id
cc：回调函数		 -
renameModelview 编辑视图回调 Function(id, viewport) id：视图id
viewport：视图信息		 -

2.4 控制类接口方法说明

注：以下方法通过在获取到viewer全局对象后即可调用，获取全局对象的方法参考1.3代码示例中的截图方法。
其它常用方法详情如下：

类型 方法名 说明 类型 参数 返回值
普通接口 nd_addTag 新增图文批注，执行后会触发viewer进入到图文批注功能 Function - void
普通接口 nd_delTag 删除图文和引线批注 Function(id) 批注id void
普通接口 nd_selectTag 主动打开图文批注 Function(id) 批注id void
普通接口 nd_getAllTags 获取当前模型批注的集合 Function - Array
普通接口 nd_updateTagtext 修改批注文案 Function(id,text) id：String类型，批注id
text：String类型，批注文案，字符串长度不能超过50		 Object更新文本后的批注对象
普通接口 nd_getCameraInfo 获取相机信息 Function - Object
普通接口 nd_resize 显示区域自适应 Function - void
普通接口 nd_render 刷新渲染 Function - void
高级接口 nd_setViewBoxDir 设置视图 Function(viewType) viewType：String类型视图参数枚举值 void
高级接口 nd_setBackGroundColor 设置背景颜色 Function(color) 十六进制颜色值或者RGB值，例如#F8F8FF或者248,248,255 void
高级接口 nd_setBackGroundImage 设置背景图片 Function(bgImg) 图片地址 void
高级接口 nd_getModelTreeBase 获取结构树基础数据，包含物件ID、节点名称、世界矩阵、节点类型、子节点、persistentId等信息。例如：
{
"objectid": "_1_0",
"name": "zpt.sldasm",
"children": [],
"matrix": null,
"type": "Model",
"persistentId": null
}
 Function - Object
高级接口 nd_getObjectidList 获取模型树物件ID集合 Function - Array
高级接口 nd_getSelectList 获取选中物件ID集合 Function - Array
高级接口 nd_getProperty 获取物件ID对应属性信息 Function(id, cc(a,b)) id：物件id，可传入字符串类型或集合类型。字符串类型例子："_77_61"；集合类型例子：["_77_61","_300_228"]cc(a, b):回调函数，a为常规属性，b为自定义属性。调用示例：nd_getProperty(["_77_61","_300_228"], (a, b) => {console.log('常规属性：', a, '自定义属性：', b)}) Object
高级接口 nd_setVisibleState 设置模型树物件勾选状态 Function(idList,isVisible) idList：Array类型，树节点id集合
isVisible：boolean类型，true表示勾选，false表示不勾选		 void
高级接口 nd_setSelectState 选中/取消选中指定物件 Function(idList,isSelect) idList：Array类型，物件id集合
isSelect：boolean类型，true表示选中，false表示取消选中		 void
高级接口 nd_setSelectVisibleState 设置选中物件的显示/隐藏状态 Function(isVisible) isVisible：boolean类型，true表示显示，false表示隐藏 void
高级接口 nd_setTransparentState 设置指定物件的透明渲染状态 Function(idList,isTransparent) idList：Array类型，物件id集合
isTransparent：boolean类型，true表示透明操作，false表示取消透明		 void
高级接口 nd_setSelectColor 设置选中物件的颜色 Function(color) color：String类型，十六进制颜色值或者RGB值。例如#F8F8FF或者248,248,255 void
高级接口 nd_enhancedDisplay 增强显示模型树节点 Function(id) id：String类型，物件id void
高级接口 nd_createMeasurePointNote 导入单条测点数据，入参无属性值时填null，入参数据为对象，如：
{
"point":{"x":0,"y":0,"z":0},"notePlace":{"x":1,"y":1,"z":1},"url":"http://10.122.92.200:8088/assets/images/派大星.jpg",
"picSize":160,
"inflection":true
}
 Function({point,notePlace,url,inflection...}) point: 测点起点信息，包含x,y,z属性；
notePlace：测点数据放置位置，包含x,y,z属性；
url:图片地址；
text：文本信息；
inflection：是否有折线,
picSize：图片大小		 void
高级接口 nd_createMeasurePointList 导入多条测点数据，需要传入一个数组集合 Function([{point,notePlace,url,inflection...}]) 同单条测试数据，但是需要传入一个数组集合 void
高级接口 nd_getMeasurePointData 获取所有测点数据 Function - Array
高级接口 nd_screenCapture 生成模型预览截图，支持是否显示水印 Function(cc, showWater) cc：回调函数Function(imgbase64)，用于接收返回结果。imgbase64是base64格式的图片数据。
showWater：截图是否显示水印		 void
高级接口 nd_screenMainContent 屏幕截图 Function(cc) cc：回调函数Function(imgbase64)，用于接收返回结果。imgbase64是base64格式的图片数据 void
高级接口 nd_getTreeByProperty 根据属性名，或属性值，或属性名+属性值搜索节点信息，匹配模式为模糊搜索，支持多条搜索 Function(type, key) type：搜索类型，1为属性名，2为属性值，3为属性名+属性值key：搜索关键字，属性名或属性值搜索例子：[’材料‘, ’质量‘]，属性名+属性值搜索例子：[{”材料“: '100'}, { "质量": "200"}]控制台示例：nd_getTreeByProperty(1, [’材料‘, ’质量‘])或nd_getTreeByProperty(3, [{”材料“: '100'}, { "质量": "200"}]) Array
高级接口 nd_getMeasureList 获取测量信息集合 Function() - Array
高级接口 nd_setPerspectiveCameraInfo 设置投影相机位置，设置后会调整相机视角 Function(info) info: object对象，相机信息 -
高级接口 nd_setOrthographicCameraInfo 设置正交相机位置，设置后会调整相机视角 Function(info) info: object对象，相机信息 -
高级接口 nd_getAllMatrixByIds 根据物件id获取，获取变换矩阵和世界矩阵信息 Function(idList) idList：Array类型，物件id的集合，例如['o_b1']，获取方式可以参考nd_getSelectList Object
高级接口 nd_setWorldMatrixById 根据物件id设置世界矩阵 Function(id, matrix) id：物件id，获取方式可以参考nd_getSelectList
matrix：世界矩阵信息，获取方式可以参考nd_getAllMatrixByIds		 -
高级接口 nd_setMatrixById 根据物件id设置变换矩阵 Function(id, matrix) id：物件id，获取方式可以参考nd_getSelectList
matrix：世界矩阵信息，获取方式可以参考nd_getAllMatrixByIds		 -
高级接口 nd_hasModelPersistId 判断模型是否有persistId Function() - Bool
高级接口 nd_setSelectByPersistId 根据persistId设置节点是否选中 Function(id, bool) id：persistId，获取方式参考nd_getModelTreeBase
bool: true为选中，false为取消选中		 -
高级接口 nd_setViewExplode 设置爆炸因子 Function(explode) explode:爆炸因子数值在-10到10之间，负数为向模型中心点爆炸，爆炸因子为0的时候不爆炸（与底部工具栏批注、测量、剖切、爆炸互斥，使用上述功能时，调用该接口不生效） -
高级接口 nd_setViewScale 设置缩放值 Function(isScale,scale) isScale: true缩小, false放大
scale:放缩系数为大于0，小于1000的正数（与底部工具栏批注、测量、剖切互斥，使用上述功能时，调用该接口不生效）		 -
高级接口 nd_setViewTranslate 设置平移 Function(x,y) [x,y] 数值支持任意实数，传值是相对位置（与底部工具栏批注、测量、剖切互斥，使用上述功能时，调用该接口不生效） -
高级接口 nd_setViewRotate 设置旋转 Function(x,y,z) [x,y,z] 数值支持任意实数（超过正负360度取余数），传值是相对位置（与底部工具栏批注、测量、剖切互斥，使用上述功能时，调用该接口不生效） -
高级接口 nd_getPmiInfo 获取pmi列表信息接口。
返回值包含：
bodyNodeID：pmi关联的部件id，
bodyNodeName：pmi关联的部件名称，
id：pmi的id，
name：pmi的名称，
type：pmi的类型。
返回值示例：
[{ 
"id": "1080", 
"name": "半径尺寸 (17)", 
"type": "Dimension", 
"bodyNodeName":"nist_ctc_02_asme1_rc_nx1200_rb11.prt", 
"bodyNodeID": "o_2_0" 
}]
 Function - Array
高级接口 nd_setOpacityRatio 设置部件不透明度 Function(ids, ratio) ids：部件的objectId
ratio：不透明度，取值范围0-1
例子：nd_setOpacityRatio (['o_1', 'o_2'], [[0.1, 0.3], [0.2, 0.2]])。
传递数组，部件下标和透明度下标对应。如果透明度设置的数组下只有一个值，但是部件有多个mesh，那么都按照这一个值进行设置		 -
高级接口 nd_getOpacityRatioById 根据部件id获取部件不透明度 Function(ids) ids：部件的objectId Array：部件下到mesh节点的不透明度
高级接口 nd_getAllObjectColorById 根据部件id获取部件颜色 Function(ids) ids：部件的objectId Array：部件下到mesh节点的颜色
高级接口 nd_setObjectColor 设置部件颜色 Function(ids, color) ids：部件的objectId集合
color：部件颜色集合，十六进制颜色例子：
nd_setObjectColor(['o_1', 'o_2'], [['000000', '000000', ['000000']])
如果颜色设置的数组下只有一个值，但是部件有多个mesh，那么都按照这一个值进行设置		 -
高级接口 nd_getCurAniInstance 获取当前模型动画实例 Function() - Array：当前配置的动画实例列表
高级接口 nd_setAniParams 修改动画参数 Function(params) params.multiple（倍数）：0.5/1/1.5/2/5params.mode（模式）：2-往复、1-循环、0-正常 -
高级接口 nd_animationPlay 播放动画 Function(id) id：实例id -
高级接口 nd_animationPause 暂停、取消暂停动画 Function() - -
高级接口 nd_animationStop 停止动画 Function() - -
高级接口 nd_animationExit 退出动画 Function() - -
高级接口 nd_getHideObjectidList 获取隐藏部件objectId集合 Function() - Array：objectId集合
高级接口 nd_getViewportList 获取视图列表信息 Function() - Array：全部视图列表
高级接口 nd_updateViewportById 编辑视图 Function(uuid, name) uuid：视图id（必填）
name：视图名称（必填）		 -
高级接口 nd_createViewport 创建视图 Function(name) name：视图名称（非必填） -
高级接口 nd_deleteViewport 删除视图 Function(uuid) uuid：视图id（必填） -
高级接口 nd_previewViewport 预览视图 Function(uuid) uuid：视图id（必填） -

举例说明：这里以截图方法举例，在模型加载成功的方法中，通过调用控制类的截图方法，即可在回调中拿到截图信息。

// 首先我们在nd_viewCtrl中声明了screenshot方法，此方法内获取到viewer全局对象后调用nd_screenCapture方法
// 然后我们就可以在模型加载完成的回调中调用screenshot进行截图了，参考代码如下：
nd_viewCtrl.screenshot(function(imgbase64){	// 截图方法。回调图片为base64
    console.log(imgbase64);
});

2.5 枚举值说明

defaultStandardView 视图参数枚举值：

枚举值 说明
front 前
back 后
left 左
right 右
top 上
bottom 下
rightUpFront 右上前
backUpRight 后上右
leftUpBack 左上后
frontUpLeft 前上左
bottomFrontLeft 下前左
bottomRightFront 下右前
bottomBackRight 下后右
bottomLeftBack 下左后

显示设置枚举值：

枚举值 说明
shadedWithEdges 边线上色
shaded 上色
hiddenLineVisible 隐线可见
hiddenLineRemove 隐线消除
wireframe 线框模式
transparent 透明模式

鼠标右键枚举值：

枚举值 说明
all 隐藏所有右键
preview-link 当前标签页打开
proper-link 属性
isolate-link 突出显示
transparent-link 透明显示
alone-link 单独显示
hide-link 隐藏显示
all-link 显示全部

hideBtnCfg完整配置：

hidebtnCfg: [
		'#ico-line',	// 1显示设置，showBtnCfg的id对应为ico-showSetting
		'#ico-Tagging', // 1批注
		'#ico-measure', // 1测量
		'#ico-pmi', // pmi
		'#ico-cutout', // 1剖切
		'#ico-explode', // 1爆炸
		'#ico-structure', // 1结构树
		'#ico-property', // 1属性
		'#ico-display', // 1显示隐藏
		'#ico-addcolor', // 1上色
		'#ico-drag', // 1拖动
		'#ico-boxselect', // 1框选
		'#ico-settings', // 1设置
		'#ico-screen', // 1窗口

		'#ico-shadedWithEdges',	// 2边线上色
		'#ico-shaded', // 2上色
		'#ico-hiddenLineVisible', // 2引线可见
		'#ico-hiddenLineRemove', // 2引线消除
		'#ico-wireframe', // 2线框模式
		'#ico-transparent-type', // 2透明模式
		'#ico-touyin', // 2正交透视
		'#ico-home', // 2重置视角

		'#ico-tagPicText', // 2图文批注
		'#ico-tagLine', // 2引线批注
		
		'#ico-coutUsually', // 2基础剖切，showBtnCfg中id对应为ico-coutUsually
		'#ico-coutBox', // 2盒剖切

		'#ico-proEntity',	// 2指定属性
		'#ico-proTotal', // 2总属性

		'#ico-highLight', // 2突出显示
		'#ico-displayHideOther', // 2单独显示
		'#ico-displayHide', // 2隐藏显示
		'#ico-transparent', // 2透明显示
		'#ico-displayResert', // 2全部还原

		'#ico-dragMove', // 2单个拖动
		'#ico-dragRestore', // 2单个复位
		'#ico-dragRestoreAll', // 2全部复位
		
		'#ico-plus', // 2框选放大
		'#ico-highlight', // 2框选高亮
		`#ico-lasso`, // 2套索选取

		'#ico-distance', // 2距离
		'#ico-length', // 2长度
		'#ico-angle', // 2角度
		'#ico-radius', // 2半径
		'#ico-lineargauge', // 2线性测量
		'#ico-wallThickness', // 2壁厚
		'#ico-area', // 2面积
		'#ico-volumweight', // 2体积重量
		'#ico-boundingbox', // 2包围盒
		'#ico-measureClear', // 2清空

		'#ico-full',	// 2全屏
		'#ico-vport',	// 2窗口

		'#ico-smartdis', // 3距离-智能测量
		'#ico-pt2pt', // 3距离-点到点
		'#ico-pt2line', // 3距离-点到线
		'#ico-pt2face', // 3距离-点到面
		'#ico-line2line', // 3距离-线到线
		'#ico-line2face', // 3距离-线到面
		'#ico-face2face', // 3距离-面到面
		'#ico-holeDist', // 3距离-圆心距
		'#ico-axis2pt', // 3距离-孔轴到点
		'#ico-axis2line', // 3距离-孔轴到线
		'#ico-axis2face', // 3距离-孔轴到面

		'#ico-smartlen', // 3长度-智能测量
		'#ico-edges', // 3线测量
		'#ico-perimeter', // 3周长

		'#ico-smartang', // 3角度-智能测量
		'#ico-lineAngel', // 3线夹角
		'#ico-faceAngle', // 3面夹角
		'#ico-linefaceAngle', // 3线面夹角

		'#ico-lmPt2Pt', // 3线性测量-点到点
		'#ico-lmPt2Line', // 3线性测量-点到线
		'#ico-lmLine2Line', // 3线性测量-线到线
		'#ico-lmHole2Hole', // 3线性测量-圆心距
		'#ico-lmAxis2Pt', // 3线性测量-孔轴到点
		'#ico-lmAxis2Line', // 3线性测量-孔轴到线

		'#ico-areaFace', // 3面积-指定面
		'#ico-areaEntity', // 3面积-指定实体
		'#ico-areaTotal', // 3面积-总面积

		'#ico-vol-boundingboxEntity', // 3体积重量-指定实体
		'#ico-volumTotal', // 3体积重量-总体积重量

		'#ico-boundingboxEntity', // 3包围盒-指定实体
		'#ico-boundingTotal', // 3包围盒-总包围盒

		'#ico-vportOne',	// 3单一视图
		'#ico-vportTwoV',	// 3二视图-水平
		'#ico-vportTwoL',	// 3二视图-垂直
		'#ico-vportFour',	// 3四视图
		'#ico-vportLink',	// 3连接视图
	],

showBtnCfg配置：

说明：showBtnCfg是一个功能数组集合。每个功能按钮为一个对象，有3个属性，id：功能，list：子功能，imgUrl：功能图标。所有功能按钮见hideBtnCfg枚举配置。可调整数据下标位置来调整viewer功能菜单位置。例子如下：

  showBtnCfg: [
    { 
			id: "ico-Tagging",
			imgUrl: 'https://img2.baidu.com/it/u=3378489420,685425476&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
		},
    { 
			id: "ico-showSetting", 
			list: [
				{
					id: 'ico-touyin',
				},
				{
					id: 'ico-wireframe',
				}
			] 
		},
    { 
			id: "ico-measure",
			list: [
				{
					id: 'ico-distance',
					list: [
						{
							id: 'ico-pt2pt',
						},
						{
							id: 'ico-axis2face',
						}
					]
				}
			]
		},
  ],

3. 批注功能接入说明

说明：模型加载前，可以通过设置nd_viewCtrl中allTags属性进行批注回显。

在viewer中进行新增、编辑等批注操作时，会触发nd_viewCtrl中对应的方法。业务层可以在回调信息中获取批注数据，并进行后续操作。

3.1 批注方法说明和代码示例

var nd_viewCtrl = {
  ...
 /** 批注相关方法 */
 // 设置初始化回显的引线批注和图文批注数据集合
 allTags: [],							
 // 添加文本批注回调，d：批注内容，i：批注图片，cc：回调函数
 addTags: function (d, i, cc) {
      cc && cc();
  },
  // 添加图文批注回调，d：批注内容，i：批注图片base64数据，cc：回调函数，cc参数i:回传一个新的图片地址
  addPicTag: function (d, i, cc) {
      cc && cc(i);
  },
  // 添加视频批注回调，d：批注内容，i：批注图片base64数据，v：视频文件流，cc：回调函数，cc参数i:回传一个新的图片地址，cc参数v:回传一个新的视频地址
  addPicTag: function (d, i, v, cc) {
      cc && cc(i, v);
  },
   // 添加引线批注方法 d：批注信息，i：批注图片，cc回调参数
  addLineTag: function(d, i, cc) {
      cc && cc();
   },
   // 编辑引线批注，d：批注信息，i：图片信息，cc回调函数
   editLineTag: function(d, i, cc) {
      cc && cc();
   },
  // 编辑图文批注回调，d：批注内容，i：批注图片base64数据，cc：回调函数，cc参数i:回传一个新的图片地址
  editPicTag: function (d, i, cc) {
      cc && cc(i);
  },
  // 编辑视频批注回调，d：批注内容，i：批注图片base64数据，v：视频文件流，cc：回调函数，cc参数i:回传一个新的图片地址，cc参数v:回传一个新的视频地址
  editVideoTag: function (d, i, v, cc) {
      cc && cc(i, v);
  },
  // 删除批注回调，uid：删除批注的tagId，cc：回调函数
  beDelTag: function (uid, cc) {
      cc && cc();
  },
  // 预览打开图文批注的回调，i：预览批注的tagId
  beSelectTag: function (i) {
  },
  // 主动删除viewer内批注，uuid：批注的tagId
  delTags: function (uuid) {
		var _contentWindow = document.getElementById("viewer").contentWindow;
		_contentWindow && _contentWindow.nd_delTags(uuid);
	},
  // 主动预览viewer内批注，uuid：批注的tagId
  selectTag: function (uuid) {
		var _contentWindow = document.getElementById("viewer").contentWindow;
   		_contentWindow && _contentWindow.nd_selectTag(uuid);
	},
  /** 其它方法 */
  ...
}

3.2 批注交互流程图



3.3 批注数据样例截图

  1. 添加批注样例截图

  2. 初始化时allTags数据样例截图

  3. 业务层向服务器发起“添加批注”网络请求样例截图：