标签类 | 前端三维库你不知道的事（六）

来源于👉【知屋安砖】

标签类属性及操作

获取标签类实例

接口说明

获取标签类实例

返回参数说明

名称	描述	类型	示例
mark	mark的实例	object	-

使用示例

var mark = app.mark;

添加dom标签

接口说明

添加dom标签

传入参数说明

名称	描述	类型	必填	示例
options	创建dom标签的详细信息	object	是	{}
options.id	mark图标的id，即标签 key，默认随机生成	string	否	{id: ‘10001’}
options.title	mark图标的title 默认 mark	string	否	{title: ‘mark’}
options.draggable	mark图标是否允许拖拽 默认为true	boolen	否	{draggable: false}
options.color	mark填充的颜色 默认[255,0,0]	array	否	{color: [99,99,99]}
options.colorLine	mark线条的颜色 默认[0,0,0]	array	否	{colorLine: [0,0,0]}
options.startPosition	mark起点所跟随的三维空间的世界坐标 默认[0,0,0]	array	否	{startPosition: [0,0,0]}
options.endPosition	mark图标主体所处的屏幕坐标 默认[0,0]	array	否 {endPosition: [800,200]
options.domElement	mark中要添加的dom元素	domElement	否	{domElement: document.createElement(‘div’)
options.componentId	该mark关联的构件key	string	否	{componentId: ‘241905945_20gbK2VjDD3hZEN$kzGQ5e’
options.callback	完成添加的回调函数 该回调函数的参数为所创建的mark的id	function	否	{callback: function(markId){}

使用示例

const domElement = document.createElement('div');
domElement.textContent = '墙壁';
const domMarkOptions = {
  id: '123',
  title: 'mark',
  color: [99, 99, 99],
  colorLine: [0, 0, 0],
  startPosition: [0, -0, 0],
  endPosition: [800, 200],
  domElement: domElement
];
mark.addDomMark(domMarkOptions, markId => {});

相关示例库
添加面板标签

添加plane标签

接口说明

添加plane标签

传入参数说明

名称	描述	类型	必填	示例
Keys	模型的key；若不传值，则设置全部模型可见	array	否	[‘10001’]

使用示例

model.show();

设置模型不可见

接口说明

设置模型不可见

传入参数说明

名称	描述	类型	必填	示例
options	创建plane标签的详细信息	object	是	{}
options.url	mark图标的地址	string	是	{url: ‘https://www.bos.xyz/bos3d/img/fire.png’}
options.id	mark图标的id， 即标签 key 默认随机生成	string	否	{id: ‘10001’}
options.side	mark图标可见面， 0-正面， 1-反面 2-双面 （默认双面）	number	否	{side: 0}
options.width	mark图标宽度 （默认为图片像素宽度）	number	否	{width: 200}
options.height	mark图标高度（默认为图片像素高度）	number	否	{height: 300}
options.useImageSize	mark图标是否使用图片宽高， 默认是false	boolen	否	{useImageSize: true}
options.opacity	mark图标的透明度（默认为 1）	number	否	{opacity: 1}
options.transparent	mark图标是否透明， 为真时opacity才会生效（默认为 false）	boolen	否	{transparent: false}
options.alwaysVisible	mark图标是否始终可见， （默认为true）	boolen	否	{alwaysVisible: true}
options.color	mark图标的图片的颜色， 默认[1,1,1] （如果不是1,1,1会覆盖图片本身的颜色）	array	否	{color: [1,1,1]}
options.emissive	mark图标的图片自发光的颜色， 默认[0,0,0] （如果不是0,0,0会覆盖图片	array	否	{emissive:[0,0,0]}
options.matrix	mark图标的4*4的转换矩阵， 默认不作变换	array	否	{matrix:[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]}
options.callback	完成添加的回调函数， 该回调函数的参数为所创建的mark的id	function	否	function(markId){}

使用示例

const planeMarkOptions = {
  id: '123',
  url: 'https://www.bos.xyz/bos3d/img/fire.png',
  side: 2,
  useImageSize: true,
  alwaysVisible: true,
  matrix: [1, 0, 0, 100, 0, 1, 0, 100, 0, 0, 1, 100, 0, 0, 0, 1]
  };
mark.addPlaneMark(planeMarkOptions, function(a) {});

添加sprite标签

接口说明

添加sprite标签

传入参数说明

名称	描述	类型	必填	示例
options	创建sprite标签的详细信息	object	是	[‘10001’]
options.position	mark图标的位置,默认[0,0,0]	array	否	{position: [0,0,0]}
options.url	mark图标的地址	string	是	{url: ‘https://www.bos.xyz/bos3d/img/fire.png’}
options.id	mark图标的id，即标签 key，默认随机生成	string	否	{id: ‘10001’}
options.width	mark图标宽度 （默认为图片像素宽度）	number	否	{width: 100}
options.height	mark图标高度 （默认为图片像素高度）	number	否	{height: 100}
options.scale	mark图标的缩放比例 （默认为1）	number	否	{scale: 1}
options.alwaysVisible	mark图标是否始终可见 （默认为true）	boolean	否	{alwaysVisible: true}
options.componentKey	该mark关联的构件key	string	否	{componentKey: ‘241905945_20gbK2VjDD3hZEN$kzGQ5e’}
options.callback	完成添加的回调函数,该回调函数的参数为所创建的mark的id	function	否	function(markId){}

使用示例

const spriteMarkOptions = {
  id: '123',
  url: 'https://www.bos.xyz/bos3d/img/fire.png',
  scale: 1,
  useImageSize: true,
  alwaysVisible: true,
  position: [0, 0, 0]
};
mark.addSpriteMark(spriteMarkOptions, function(a) {});

添加Three标签

接口说明

添加Three标签

传入参数说明

名称	描述	类型	必填	示例
options	创建Three标签的详细信息	object	是	{}
options.id	mark图标的id，即标签 key 默认随机生成	string	否	{id: ‘10001’}
options.name	mark图标的文字描述 默认mark	string	否	{name: ‘mark’}
options.scale	mark图标的缩放比例 （默认为20）	number	否	{scale: 15}
options.alwaysVisible	mark图标是否始终可见 （默认为true）	boolean	否	{alwaysVisible: false}
options.color	mark图标的背景颜色 默认[99,99,99]	array	否	{color: [0,0,0]}
options.wordColor	mark图标的文字的颜色 默认[0,0,0]	array	否	{wordColor: [0,0,0]}
options.position	mark在三维空间的位置 默认[0,0,0]	array	否	{position: [0,0,0]}
options.callback	完成添加的回调函数,该回调函数的参数为所创建的mark的id	function	否	function(markId){}

使用示例

const threeOptions = {
  id: '123',
  scale: 2,
  name:'mark',
  alwaysVisible: true,
  position: [50, 500, 500]
};
mark.addThreeMark(threeOptions, function(markId) {});

更新已创建的标签

接口说明

更新已创建的标签

传入参数说明

名称	描述	类型	必填	示例
markId	需要更新的标签id	string	是	‘10001’
options	具体属性要求根据更新的标签Id的标签类型传入对应的创建标签时的options参数	object	是

使用示例

const domElement = document.createElement('div');
domElement.textContent = '墙壁';
const domMarkOptions = {
  title: 'mark',
  color: [99, 99, 99],
  colorLine: [0, 0, 0],
  startPosition: [0, -0, 0],
  endPosition: [800, 200],
  domElement: domElement
};
mark.update('10001',domMarkOptions);

获取当前页面已显示的标签id列表

接口说明

获取当前页面已显示的标签id列表

传入参数说明

名称	描述	类型	示例
ids	页面上已显示出来的标签的id列表数组	array	[‘10001’, ‘10002’]

使用示例

var ids = mark.getShowList();

设置仅显示的标签列表

接口说明

将传入的标签id列表显示到页面上，其余标签隐藏。

传入参数说明

名称	描述	类型	必填	示例
ids	需要只显示的标签的id	array	是	[‘10001’, ‘10002’]

使用示例

mark.setShowList(['10001']);

显示标签

接口说明

将传入的标签id列表显示在页面上。

传入参数说明

名称	描述	类型	必填	示例
ids	需要在页面上显示的标签的id列表数组	array	是	[‘10001’, ‘10002’]

使用示例

mark.show(['10001']);

获取隐藏的标签

接口说明

获取隐藏的标签id列表。

传入参数说明

名称	描述	类型	示例
ids	页面上隐藏的标签列表	array	[‘10001’, ‘10002’]

使用示例

var ids = mark.getHideList();

设置隐藏的标签

接口说明

将传入的标签id列表中的标签设置为隐藏，其余标签都显示。

传入参数说明

名称	描述	类型	必填	示例
ids	需要仅隐藏的标签列表	array	是	[‘10001’, ‘10002’]

使用示例
使用示例

mark.setHideList(['10001']);

隐藏标签

接口说明

将传入的标签id列表中的标签隐藏。

传入参数说明

名称	描述	类型	必填	示例
ids		需要隐藏的标签id array	是	[‘10001’, ‘10002’]

使用示例

mark.hide(['10001']);

获取所有已创建的标签id列表

接口说明

获取所有已创建的标签id列表

传入参数说明

名称	描述	类型	示例
ids	页面上已经创建的标签id列表	array	[‘10001’, ‘10002’]

使用示例

var ids = mark.getIdList();

获取显示的标签详情列表

接口说明

获取页面上已经显示的标签详情列表，详情包括该标签的id种类和显示状态。

传入参数说明

名称	描述	类型	示例
ids	已显示的标签的详情列表	array	[{id: ‘10001’,type:‘DOMMARK’,display:true}]

使用示例

var ids = mark.getShowInfoList();

##获取隐藏的标签详情列表
接口说明

获取页面上已经隐藏的标签详情列表，详情包括该标签的id种类和显示状态。

传入参数说明

名称	描述	类型	示例
ids	已显示的标签的详情列表	array	[{id: ‘10001’,type:‘DOMMARK’,display:true}]

使用示例

var ids = mark.getHideInfoList();

删除标签

接口说明

将传入的标签id列表的标签删除。

传入参数说明

名称	描述	类型	必填	示例
ids	需要删除的标签列表	array	是	[‘10001’, ‘10002’]

使用示例

mark.delete(['10001']);

切换隐藏显示标签

接口说明

将传入的标签id列表里的所有标签全都切换隐藏显示，若不传参数则将所有已创建的标签进行切换显示隐藏， 即原来是显示的标签设置成隐藏，原来是隐藏的标签设置成显示。

传入参数说明

名称	描述	类型	必填	示例
ids	需要切换隐藏显示的标签id列表	array	否	[‘10001’, ‘10002’]

使用示例

mark.toggleDisplay(['10001']);

设置标签的鼠标点击监听事件的开关状态

接口说明

获取页面上已经显示的标签详情列表，详情包括该标签的id种类和显示状态。

传入参数说明

名称	描述	类型	必填	示例
type	标签的类型,‘PLANEMARK’,‘SPRITEMARK’,‘THREEMARK’ 中的一种, 默认为’SPRITEMARK’	string	否	‘SPRITEMARK’
flag	开启或者关闭标签的鼠标监听事件，默认为true	boolen	否	false

使用示例

mark.switchClickEnable('SPRITEMARK',false);

设置标签的触屏监听事件的开关状态

接口说明

获取页面上已经显示的标签详情列表，详情包括该标签的id种类和显示状态。

传入参数说明

名称	描述	类型	必填	示例
type	标签的类型,‘PLANEMARK’,‘SPRITEMARK’,‘THREEMARK’ 中的一种, 默认为’SPRITEMARK’	string	否	‘SPRITEMARK’
flag	开启或者关闭标签的鼠标监听事件，默认为true	boolen	否	true

使用示例

mark.switchTouchEnable('SPRITEMARK',false);

添加标签的监听事件

接口说明

获取页面上已经显示的标签详情列表，详情包括该标签的id种类和显示状态。

传入参数说明

名称	描述	类型	必填	示例
callback	点击标签后需要进行的回调函数，函数参数接受的是 markIds	function	否	function(markid){}

使用示例

mark.click(function(markid){}

获取标签的类型

接口说明

获取页面上已经显示的标签详情列表，详情包括该标签的id种类和显示状态。

传入参数说明

名称	描述	类型	示例
types	支持的标签类型列表	array	[‘dom’, ‘plane’, ‘sprite’, ‘three’]

使用示例

var types = mark.getTypes();

相关阅读

• 小红砖 | 前端三维库你不知道的事（一）
• 视图类 | 前端三维库你不知道的事（二）
• 模型类 | 前端三维库你不知道的事（三）
• 构件类 | 前端三维库你不知道的事（四）
• 相机类 | 前端三维库你不知道的事（五）
• 系统类 | 前端三维库你不知道的事（七）
• 调用类 | 前端三维库你不知道的事（八）
• 小红砖API2.0强势上线