通用3D-标牌子组件
标牌子组件的组成部分分为定位点和标牌两个部分,下面的小点叫做定位点,上面的矩形部分叫做的标牌。点击定位点可以展开或隐藏标牌,也可以开启轮播,自动地定时地逐个展开标牌面板。可在数据源中接入带经纬度数据的数组,通过经纬度映射到世界坐标后,自动生成多个标牌对象。
因为这个子组件叫做标牌,而组成标牌子组件的两个部分中又包含名叫标牌的那一部分,所以为了区分,下文中称呼子组件本身为标牌子组件,称呼标牌那一部分为标牌部分。如下图所示:
配置项
基础设置
层级序号
自动排序
样式配置
基准点
设置的是标牌部分的基准点(而不是定位点的),基准点是一种锚点。(关于锚点的介绍可以参见《通用知识 - 锚点》)
标牌部分的位置定位是以基准点为基准的,而标牌子组件位置是根据经纬度映射在场景中的世界坐标的,所以基准点设置的是标牌部分上对齐到场景中的世界坐标的点。
一般设置“50% 100%“,这样标牌部分的尺寸变大后,会朝着上方增长,并且始终居中。
偏移
设置的是标牌部分的偏移(而不是定位点的),它是一个3维向量,它的X和Y的数值是像素为单位的,在以基准点定位的基础上,再分别在水平方向和垂直方向对标牌部分进行移动(不影响定位点)。而它的第三个数值也就是Z,是对整个标牌子组件进行偏移,而且只是对世界坐标中Z分量的偏移。
定位点
定位点配置项有两组格式一样的配置项,分别是默认样式和当前样式,这两组配置项类似,下面只对默认样式进行详解介绍,当前样式可以参考。
默认样式
图片上传和尺寸
可以上传图片作为定位点的样式,尺寸设置的是在场景中定位点实际渲染的尺寸。
偏移
这个偏移设置的仅仅是定位点的偏移,不影响标牌部分,它两个数值都是像素为单位的,分别在水平方向和垂直方向上移动定位点。
当前样式
其配置项和默认样式的完全一致,这里不对配置项本身再次进行讲解,只是需要指出的是:默认样式设置的是定位点正常状态的下的样式,而当前样式设置的定位点在轮播状态下或点击状态下的样式,也就是说定位点被点击或轮播到之后就变成当前样式了。
如果不需要定位点有两个样式,不上传当前样式的图片或者删除当前样式的图片,只使用默认样式下的配置。
背景
类型配置项设置的标牌部分的背景类型,有两种类型可选,分别是固定尺寸和自适应尺寸。
自适应尺寸
类型配置项设置成自适应尺寸后,下方的配置项切换成了背景样式。对于标牌部分而言,设置成自适应尺寸之后,会动态计算宽高,会在保持一定的内边距和能容纳所有文字的前提下,动态地撑起宽高,背景也随之改变,这样就不用担心文字超出标牌边框的问题了。
填充
设置背景的填充颜色
描边颜色
设置背景的描边颜色
描边粗细
设置背景的描边粗细
圆角
设置背景圆角大小,是一个像素单位的数值。
阴影
设置背景的阴影,参见《通用配置项说明》中阴影的部分。
这里的扩展参数不生效。
内边距
设置文字部分与背景边框之间留白的区域大小,数值单位是像素。
固定尺寸
自适应尺寸可动态计算背景,但是只有描边和填充等简单样式,如果想要自定义复杂样式,可以切换到固定尺寸来上传图片。
背景图片和尺寸
上传图片作为背景并且设置其尺寸。
内容样式
设置的是标牌部分的文字样式。子组件数据中value字段的数值会显示成主内容的文字,而前缀和后缀就是在主内容前后附加的文字。
前缀
内容
设置前缀文字,不需要前缀可清空输入框。
文本样式
设置前缀的文字样式。
偏移
设置前缀相对于主内容的偏移,单位是像素。
主内容
文本样式
设置主内容的文字样式。
偏移
设置主内容相对于标牌部分中心的偏移,单位是像素。
后缀
内容
设置后缀文字,不需要后缀可清空输入框。
文本样式
设置后缀的文字样式。
偏移
设置后缀相对于主内容的偏移,单位是像素。
交互动画
设置每个点位的交互方式,包括鼠标交互和自动轮播。
交互方式
设置定位点的交互方式,指的是用户主动使用鼠标等设备与标牌子组件的交互。
- 无 无交互,不能交互控制标牌部分的收缩与展开(只能通过轮播)。
- 点击 鼠标点击定位点后展开标牌部分,再次点击收起。
- 悬停 鼠标悬浮到定位点上后展开标牌部分,鼠标移出后收起。
轮播动画
设置是否开启轮播动画。轮播动画可以与交互方式可以共存,就是说开启自动轮播的情况下,仍然可以使用某种交互方式控制点位。
上文说到,设置交互方式为无,不能用交互来控制点位的展开,仍可以使用轮播自动控制点位的展开。但如果连轮播也关闭了,就没有能控制点位展开的方式了,于是我们设计的是这时所有的点位都会直接切换成、并永远保持着展开的状态(并且不会再收起)。
轮播间隔
设置轮播的间隔时间,单位是秒。
数据
数据中支持传入数组,数组的每个元素是一个对象结构,对象的字段和意义如下:
- lng:经纬
- lat:维度
- value:数值,显示在标牌的主内容中,可以是数字也可以文字。
示例如下:
[
{
"lng": 120.853576,
"lat": 28.887459,
"value": 1578
}
]
交互
回调和自定义事件
该子组件中回调和自定义事件有着完全相同的触发时机,并且发送完全一样的数据,所以二者综合起来说明。
鼠标点击
鼠标点击某个点位的定位点后发送回调和自定义事件,发送的是数据源的数组中当前点位的数据。配置项中交互方式设置为无,则不会触发。
状态改变
鼠标点击定位点或轮播动画轮播到某个点位时发送回调和自定义事件,发送的是数据源的数组中当前点位的数据。和鼠标点击的区别在于:鼠标点击只在鼠标点击时发送,而状态改变不仅会在鼠标点击时发送,还会在轮播到某个点位时发送。
自定义动作
暂无