2D Viewer组件

接入方式参考3D Viewer，控制类基本和3D一致，但是在某些功能参数上存在区别。2D和3D分别加载的是不同的viewer资源，创建控制类时建议分开读取各自的控制类。

1. 快速上手指南

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

项目目录参考如下：

2DViewer资源目录：

1.2 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>2D预览模型</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 = ''; 
  		// 加载viewer模型
        nd_viewCtrl.init({
            src: 'models/bim/',//轻量化文件所在文件夹路径 
        });    
    }
</script>
</html>

1.3 viewer.js参考示例

代码参考示例如下：

var nd_viewCtrl = {
	src: '', // 轻量化地址
	allTags: [], // 批注信息
	hidebtnCfg: [],// 隐藏viewer中的功能按钮，对应按钮id
	_opt:{},
	fingerHttp: '', 
  	/** 初始化方法 */
	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="2DViewer/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);
			});
		}
	},
  	/** 其它方法 */
  	...
}

2. viewer.js基础控制类说明

2.1 控制类常用属性分类说明

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

  • 初始化时设置的属性参数，如src等
  • 主动调用viewer的方法，如screenshot()等
  • 被动收到viewer通知的方法，如initLoad()等

2.2 控制类init代码调用

init 是初始化 viewer 的方法，传入关键参数和回调，页面即可开始预览模型。 注：init 方法属于 nd_viewCtrl 中的一个属性方法，通常可以将方法或参数作为传参，重新赋值到 nd_viewCtrl 上，init 方法是可以根据业务需求自己调整内部逻辑的。

代码参数如下：

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

  }   
});

2.3 控制类属性配置说明

说明：可通过设置控制类属性，配置viewer提供的功能。详细设置如下：

属性名 说明 类型 可选值 默认值
src 设置模型地址 String 必填，如：相对路径，绝对路径，http地址 -
fingerHttp 设置云api地址 String 非必填，如：http地址 -
language 中英文配置 String 非必填，如zh，en zh
hidebtnCfg 设置功能按钮隐藏，showbtnCfg未定义或者空时生效 Array 非必填，隐藏按钮的id合集，配置见枚举值 -
showBtnCfg 设置工具栏按钮集合，按顺序排列，用于显示需要的操作按钮，传值为对应按钮id，按按钮显示顺序排列 Array 非必填，配置见枚举值 不做设置的时默认显示所有项
bgColor 设置背景颜色，优先级低于bgImg，bgImg有值时背景颜色不生效 String 非必填，十六进制颜色值或者RGB值，
例如#F8F8FF或者248,248,255		 #F2F2F2
unitType 设置模型单位 String 非必填，原始模型的单位：' '，
毫米(公制单位)：'mm'，
英尺(英制单位)：'in'		 -
configNum 设置多配置模型默认显示第几个配置 Number 非必填，如：0，1，2等 -1
allTags 设置初始化时图文批注数据，需要与图文批注接口配合使用 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：宽高设置		 -
beSelectPoint 在模型区域点击后，返回屏幕坐标值 Function(point) point：坐标值，可以根据此坐标值去调用接口，创建批注信息
point.x：x坐标值
point.y：y坐标值		 -

2.4 其它控制类方法说明

参考如下：

方法名 说明 类型 参数 返回值
nd_addTag 新增批注 Function — void，界面完成添加操作会触发onAddTag/onAddPicTag
nd_delTag 删除批注 Function(id) 批注id void
nd_updateTagtext 修改批注文案 Function(id,text) id：String类型，批注id
text：String类型，批注文案，字符串长度不能超过50		 更新文本后的批注对象
nd_screenCapture 生成模型预览截图，支持是否显示水印 Function(cc, showWater) cc：回调函数Function(imgbase64)，用于接收返回结果。imgbase64是base64格式的图片数据。
showWater：截图是否显示水印		 void
nd_screenMainContent 屏幕截图 Function(cc) cc：回调函数Function(imgbase64)，用于接收返回结果。imgbase64是base64格式的图片数据 void
nd_getMeasuringScale 获取测量比例 Function — Array
nd_createPicTag 创建批注信息。集成方传入批注基本信息info，通过回调函数可以拿到完整批注信息，存储批注数据后执行cc回调函数通知viewer模型区域添加批注。info坐标点可通过beSelectPoint获取，或自行获取，坐标点要求是模型区域的相对坐标。 Fucntion(info, callback) info: 批注信息，包含 x，y坐标点(必传)，
text文本信息(非必传)，imgURL图片信息(非必传)，
例如：
{
x: 200, 
y:200, 
text: '文本', 
imgURL: 'http://***'
}
callback(tag, cc)：
tag是viewer回传的批注信息，需要集成方存储起来，
cc是回调函数执行后viewer区域会添加批注，存储操作通常是异步的，执行完后调用cc函数。
例子：
nd_createPicTag({text: '批注文本', x: 475, y: 251, imgURL: ''}, (info, cc) => {console.log(info);setTimeout(() => {cc()}, 500)})
 -
nd_resize 显示区域自适应 Function — void
nd_render 刷新渲染 Function — void

2.5 枚举值说明

hideBtnCfg完整配置：

	hidebtnCfg: [
		'#ico-Tagging', // 1批注
		'#ico-measure', // 1测量
		'#ico-structure', // 1图层
		'#ico-show', // 1显示隐藏批注
		'#ico-color', // 1背景色
		'#ico-unit', // 1单位设置
		'#ico-zoomwindow', // 1框选放大
		'#ico-home', // 1重置
		'#ico-full', // 1全屏

		'#ico-coordinate', // 2坐标
		'#ico-distance', // 2距离
		'#ico-edges', // 2线段长度
		'#ico-continuousLine', // 2连续长度
		'#ico-continuousArea', // 2面积
		'#ico-radius', // 2半径
		'#ico-lineAngel', // 2角度
		'#ico-meaScale', // 2设置比例
		'#ico-measureClear', // 2清空

		'#ico-smart1', // 3距离-智能测量，showBtnCfg对应为ico-smartdis
		'#ico-pt2pt', // 3距离-点到点
		'#ico-pt2line', // 3距离-点到线
		'#ico-line2line', // 3距离-线到线
		'#ico-Lineargauge', // 3距离-线性测量
		'#ico-holeDist', // 3距离-圆心距
		'#ico-axis2pt', // 3距离-圆心到点
		'#ico-axis2line', // 3距离-圆心到线
	],

showBtnCfg配置：

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

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

3. 批注功能接入使用

说明：模型初始化加载时，批注信息可以通过nd_viewCtrl.init中tags参数传入。

当viewer中进行批注操作如新增、编辑等，viewer会触发nd_viewCtrl中对应的方法，业务层可以拿取到批注相关信息进行后续操作。

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

var nd_viewCtrl = {
	...
  	/** 批注相关方法 */
   addTags: function (a, i, cc) { // 添加文本批注回调
		if (this._opt.onAddTag)
		this._opt.onAddTag(a, i, cc);
		else
		cc();
	},
	addPicTag: function (d, i, cc) { // 添加图文批注回调，d批注内容，i批注图片，cc回调函数
		if (this._opt.onAddPicTag)
		this._opt.onAddPicTag(d, i, cc);
		else
		cc(i);
	},
   editPicTag: function (d, i, cc) {// 编辑图文批注回调 d: 批注内容 i：批注图片 cc回调函数
		cc && cc(i);
	},
   beDelTag: function (uid, cc) { // 删除批注回调
		if (this._opt.onDel)
		this._opt.onDel(uid, cc);
		else
		cc();
	},
    beSelectTag: function (i) { // 批注被选择回调
		this._opt.onSelect && this._opt.onSelect(i);
	},
  	/** 其它方法 */
  	...
}

3.2 批注交互流程图



3.3 批注数据样例截图

  1. 初始化时的批注数据

  2. 业务层向服务器发起添加批注网络请求样例。content字段是批注信息，传给服务器保存。注：从viewer给出的文件建议服务器转成可预览的地址，方便下次预览。