通用3D- 信息面板子组件

信息面板可以用来展示多行文本信息的数据，数据中的每个字段都对应着面板中的一行文字。可在数据源中接入带经纬度数据的数组，通过经纬度映射到世界坐标后，自动生成多个信息面板对象，生成的每个对象称为点位，每个点位对应着数据源数组中每个元素。

信息面板由面板和定位点组成，上方的多行文字组件的部分称为面板，下方的点状的图标称为定位点。点击定位点可以展开或者收起面板，或者使用自动轮播的方式定时地逐个地展开面板。

面板由多行文字组成，每行文字又分成标签和值。标签在左侧，一般是指标名称，如上图中的“名称”、“PM2.5”、“等级”。值在右侧，一般是指标的数值，如上图中的“监测点#03”、“87.9”、“差”。

配置项

基础设置

内容样式

边距

设置上、下、左、右的边距，数值的单位是像素。

状态背景

设置的面板的背景样式。

状态背景配置项本身是个数组，可以添加多个状态，数据中的status字段会尝试匹配所有状态的状态值配置项，如果匹配成功，则会使用匹配到的那个状态的样式；如果没有匹配到任何状态，则默认使用状态背景中的第一个状态。

状态值

是个可以输入任意文字的输入框，它会和数据中的status字段匹配。信息面板的每个点位如果匹配上了某个状态的状态值，则使用这个状态的配置项作为自己的样式。如果没有多状态样式的需求，可以清空这个配置项的输入框，也就是使用空值，这样只配置一个状态，所有点位都会使用这个样式。

背景类型

设置面板的背景样式的类型，当前支持上传图片和视频。

尺寸

设置面板的宽高，如果单行文字超过这个宽高，则会被裁剪掉。

基准点

设置面板的基准点，是一个锚点。（关于锚点的介绍可以参见《通用知识 - 锚点》）

面板的位置定位是以基准点为基准的，而面板位置是根据经纬度映射在场景中的世界坐标的，所以基准点设置的是面板上对齐到场景中的世界坐标的点。

一般设置“50% 100%“，这样面板的尺寸变大后，会朝着上方增长，并且始终居中。

偏移

设置面板在以基准点定位的基础上再进行移动的数值，单位是像素。

定位点

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

默认样式

图片上传和尺寸

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

偏移

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

当前样式

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

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

行配置

设置的是面板中每一个文字的样式，它本身是个数组，可以为每一行单独配置样式。每个点位的数据中的任意一个字段，如果和行配置中的映射配置项匹配上，则使用这一组配置项作为自己的这一行的样式。如果一个点位的数据中有某个字段没有在行配置中匹配上某一项，则不会渲染到面板中。

映射

字段名用来和数据中的字段做匹配，匹配上的那个字段会使用当前这一项行配置作为样式来渲染到面板中，并且使用名称输入框中的文字作为面板中这一行的标签（参见上文对于标签的介绍）。

位置

设置每一行的位置，默认每一行都是基于面板左上角定位的，都设置为0的话，每一行都重叠显示在左上角。所以想要实现逐行垂直排列的话，要手动对每一行设置不同Y坐标。每一行的Y等于前一行的Y加上行高和行间距。

例如，每一行文字的字体大小是16像素，这样每一行的行高就是16像素。需求是设置每两行之间间隔10像素排列，这样需要设置第一行的Y为0，第二行的Y就是在第一行的行高的基础上加上行间距10，也就是26。第三行的Y就是在第二行Y的基础上再加上单行的行高和行间距，也就是32。其他行依次类推。

设置X可以让每一行相对于左边框有不同的留白距离，当前想要统一每一行的左侧留白，只需要设置边距配置项就可以了。

标签样式

设置当前行的标签的样式

文本样式 当前行的标签的文字样式。
右边距 标签与值的间距，因为值在标签的右边，所以叫右边距。

值样式

设置当前行的值的样式。

文本样式 当前行的值的文字样式。

后缀

设置当前行中值的后缀样式。

内容设置后缀的文字内容，内容为空则不显示后缀。
文本样式 设置后缀的文字样式。
左边距 设置后缀与主体文字的间距，因为主体文字在后缀的左边，所以叫左边距。

交互动画

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

交互方式

设置定位点的交互方式，指的是用户主动使用鼠标等设备与点位的交互。

无无交互，不能交互控制面板的收缩与展开（只能通过轮播）。
点击鼠标点击定位点后展开面板，再次点击收起。
悬停鼠标悬浮到定位点上后展开面板，鼠标移出后收起。

轮播动画

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

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

轮播间隔

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

数据

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

lng：经纬
lat：维度
status：状态，会与状态背景-状态值进行匹配，来确定点位的背景样式。

除了上面3个标准的字段名之外，还可以加入任意合法的字段名，只要和行配置-映射-字段值中的文字匹配上，就可以在面板中显示成单独的一行，并使用匹配上的行样式。

例如下面的示例中，加入了“value1”、“value2”、“value3”等3个自定义的字段，只要在行配置-映射-字段值中配置了相应的名字，就是一个合法的字段名，当然如果没有对应的名字，则会不显示在面板中。

自定义的字段的值可以字符串也可以是数字。

示例如下：

[
  {
    "lng": 120.853576,
    "lat": 28.887459,
    "value1": 1578,
    "value2": 18.585
    "value3": "你好"
  }
]

交互

回调和自定义事件

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

鼠标点击

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

状态改变

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

自定义动作

暂无