2D批注完整功能集成说明

对于3DViewer，2DViewer相同的功能，原则上接口设计和调用方式是一致的。批注支持回显，添加，编辑，删除，选中等功能。集成各功能对应的接口，即可完成批注完整功能。

1. 批注功能交互流程图

2. 热点批注方法说明和代码示例

批注控制类方法集成代码示例：

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

其它热点批注控制类接口

说明：除上面示例接口delTags外，viewer还提供了其它增强接口，以供集成方使用，参考：


方法名	说明	类型	参数	返回值
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_clearTagStaus	图文批注清除防抖限制，点击确定按钮时可再次获取批注信息	Function	-	void

热点批注类型枚举：
添加接口tagOperateAdd、编辑接口tagOperateEdit的info信息：

旧版本添加、编辑接口：

注：建议使用新版添加tagOperateAdd、编辑tagOperateEdit接口；通过接口信息中的type区分不同类型批注；新旧接口同时配置时，旧版接口优先级更高。

var nd_viewCtrl = {
  ...
 /** 旧版本批注添加&编辑相关方法 */						
 // 添加文本批注回调，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:回传一个新的视频地址
  addVideoTag: 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);
   },
}

设置隐藏批注操作按钮
业务端可能存在权限判断，需要隐藏批注的删除、编辑按钮。可配置hidebtnCfg进行设置，代码示例
```
var nd_viewCtrl = {
  ...
  hidebtnCfg: ["#tag-can-edit", "#tag-can-del"],
  ...
}
```

3. 非热点批注方法说明和代码示例

非热点批注控制类方法集成代码示例：

var nd_viewCtrl = {
  ...
  /** 控制类属性 */
  newAnnoList: [],                      // 设置初始化回显非热点批注数据集合
    
  /** 控制类方法 */
  addPostil: function(info, cc) {		// 添加批注，info：批注相关信息，参考下面截图，cc：回调函数
	cc && cc();
  },

  editPostil: function(info, cc) {		// 编辑批注，info：批注相关信息，参考下面截图，cc：回调函数
	cc && cc();
  }, 

  delPostil: function(info, cc) {		// 删除批注，info：批注相关信息，参考下面截图，cc：回调函数
	cc && cc();
  }, 
  

  /** 控制类接口 */
  getNewAnnoList: function () {         // 获取非热点批注集合       
		var _contentWindow = document.getElementById("viewer").contentWindow;
		var list = _contentWindow && _contentWindow.nd_getNewAnnoList();
        return list;
  },
  
    
  /** 其它方法 */
  ...
}

其它非热点批注控制类接口

说明：除批注控制类方法示例接口delTags外，viewer还提供了其它增强接口，以供集成方使用，参考：


方法名	说明	类型	参数	返回值
nd_getNewAnnoList	获取所有非热点批注信息	Function	-	Array：所有批注数据

非热点批注类型枚举

4. 批注数据样例截图

单条批注数据，样例截图：
Figure 1. 热点批注：

Figure 2. 非热点批注：
初始化时设置allTags进行批注回显，传入批注集合数据，样例截图：
集成方向服务器发起“添加批注”网络请求，样例截图：
说明：批注的外层结构集成方可自定义调整。添加图片或视频批注时，viewer会回传对应的文件流，集成方将文件流转化成一个可预览的http地址，可以极大地减少数据大小。