通用3D-标牌子组件

标牌子组件的组成部分分为定位点标牌两个部分,下面的小点叫做定位点,上面的矩形部分叫做的标牌。点击定位点可以展开或隐藏标牌,也可以开启轮播,自动地定时地逐个展开标牌面板。可在数据源中接入带经纬度数据的数组,通过经纬度映射到世界坐标后,自动生成多个标牌对象。

因为这个子组件叫做标牌,而组成标牌子组件的两个部分中又包含名叫标牌的那一部分,所以为了区分,下文中称呼子组件本身为标牌子组件,称呼标牌那一部分为标牌部分。如下图所示:

配置项

基础设置

层级序号

参见《通用配置项说明》中的子组件的层级序号部分

自动排序

参见《通用配置项说明》中的子组件的自动排序部分

样式配置

基准点

设置的是标牌部分的基准点(而不是定位点的),基准点是一种锚点。(关于锚点的介绍可以参见《通用知识 - 锚点》

标牌部分的位置定位是以基准点为基准的,而标牌子组件位置是根据经纬度映射在场景中的世界坐标的,所以基准点设置的是标牌部分上对齐到场景中的世界坐标的点。

一般设置“50% 100%“,这样标牌部分的尺寸变大后,会朝着上方增长,并且始终居中。

偏移

设置的是标牌部分的偏移(而不是定位点的),它是一个3维向量,它的X和Y的数值是像素为单位的,在以基准点定位的基础上,再分别在水平方向和垂直方向对标牌部分进行移动(不影响定位点)。而它的第三个数值也就是Z,是对整个标牌子组件进行偏移,而且只是对世界坐标中Z分量的偏移。

定位点

定位点配置项有两组格式一样的配置项,分别是默认样式当前样式,这两组配置项类似,下面只对默认样式进行详解介绍,当前样式可以参考。

默认样式

图片上传和尺寸

可以上传图片作为定位点的样式,尺寸设置的是在场景中定位点实际渲染的尺寸。

偏移

这个偏移设置的仅仅是定位点的偏移,不影响标牌部分,它两个数值都是像素为单位的,分别在水平方向和垂直方向上移动定位点

当前样式

其配置项和默认样式的完全一致,这里不对配置项本身再次进行讲解,只是需要指出的是:默认样式设置的是定位点正常状态的下的样式,而当前样式设置的定位点在轮播状态下或点击状态下的样式,也就是说定位点被点击或轮播到之后就变成当前样式了。

如果不需要定位点有两个样式,不上传当前样式的图片或者删除当前样式的图片,只使用默认样式下的配置。

背景

类型配置项设置的标牌部分的背景类型,有两种类型可选,分别是固定尺寸和自适应尺寸。

自适应尺寸

类型配置项设置成自适应尺寸后,下方的配置项切换成了背景样式。对于标牌部分而言,设置成自适应尺寸之后,会动态计算宽高,会在保持一定的内边距和能容纳所有文字的前提下,动态地撑起宽高,背景也随之改变,这样就不用担心文字超出标牌边框的问题了。

填充

设置背景的填充颜色

描边颜色

设置背景的描边颜色

描边粗细

设置背景的描边粗细

圆角

设置背景圆角大小,是一个像素单位的数值。

阴影

设置背景的阴影,参见《通用配置项说明》中阴影的部分

这里的扩展参数不生效。

内边距

设置文字部分与背景边框之间留白的区域大小,数值单位是像素。

固定尺寸

自适应尺寸可动态计算背景,但是只有描边和填充等简单样式,如果想要自定义复杂样式,可以切换到固定尺寸来上传图片。

背景图片和尺寸

上传图片作为背景并且设置其尺寸。

内容样式

设置的是标牌部分的文字样式。子组件数据中value字段的数值会显示成主内容的文字,而前缀后缀就是在主内容前后附加的文字。

前缀

内容

设置前缀文字,不需要前缀可清空输入框。

文本样式

设置前缀的文字样式。

偏移

设置前缀相对于主内容的偏移,单位是像素。

主内容

文本样式

设置主内容的文字样式。

偏移

设置主内容相对于标牌部分中心的偏移,单位是像素。

后缀

内容

设置后缀文字,不需要后缀可清空输入框。

文本样式

设置后缀的文字样式。

偏移

设置后缀相对于主内容的偏移,单位是像素。

交互动画

设置每个点位的交互方式,包括鼠标交互和自动轮播。

交互方式

设置定位点的交互方式,指的是用户主动使用鼠标等设备与标牌子组件的交互。

  • 无交互,不能交互控制标牌部分的收缩与展开(只能通过轮播)。
  • 点击 鼠标点击定位点后展开标牌部分,再次点击收起
  • 悬停 鼠标悬浮到定位点上后展开标牌部分,鼠标移出后收起。

轮播动画

设置是否开启轮播动画。轮播动画可以与交互方式可以共存,就是说开启自动轮播的情况下,仍然可以使用某种交互方式控制点位

上文说到,设置交互方式,不能用交互来控制点位的展开,仍可以使用轮播自动控制点位的展开。但如果连轮播也关闭了,就没有能控制点位展开的方式了,于是我们设计的是这时所有的点位都会直接切换成、并永远保持着展开的状态(并且不会再收起)。

轮播间隔

设置轮播的间隔时间,单位是秒。

数据

数据中支持传入数组,数组的每个元素是一个对象结构,对象的字段和意义如下:

  • lng:经纬
  • lat:维度
  • value:数值,显示在标牌的主内容中,可以是数字也可以文字。

示例如下:

[
  {
    "lng": 120.853576,
    "lat": 28.887459,
    "value": 1578
  }
]

交互

回调和自定义事件

该子组件中回调和自定义事件有着完全相同的触发时机,并且发送完全一样的数据,所以二者综合起来说明。

鼠标点击

鼠标点击某个点位定位点后发送回调和自定义事件,发送的是数据源的数组中当前点位的数据。配置项中交互方式设置为,则不会触发。

状态改变

鼠标点击定位点轮播动画轮播到某个点位时发送回调和自定义事件,发送的是数据源的数组中当前点位的数据。和鼠标点击的区别在于:鼠标点击只在鼠标点击时发送,而状态改变不仅会在鼠标点击时发送,还会在轮播到某个点位时发送。

自定义动作

暂无


400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群