浮框层_3D地球_组件指南_DataV数据可视化

浮框层是3D地球的子组件，支持独立的样式和数据配置，包括浮框的大小、颜色、内容以及经纬度等，适用于将地理位置上的某些具体信息以浮框的形式展示在可视化应用上。本文介绍浮框层各配置项的含义。

参见地球容器添加浮框层子组件，并配置其参数。

配置

搜索配置：单击配置面板右上角的搜索配置，可在搜索配置对话框中输入您需要搜索的配置项名称，快速定位到该配置项，系统支持模糊匹配。详情请参见搜索组件配置。
高度：浮框层距离地球球体之间的距离，单位为px。
缩放：浮框层的大小。
透明度：浮框层的透明度。

数据

上图中的示例JSON代码如下。

[
  {
    "lng": 135,
    "lat": 34,
    "content": {
      "width": 900,
      "height": 350,
      "title": "标题1",
      "titleFontSize": 45,
      "titleColor": "#fbf320",
      "content": "正文",
      "contentColor": "#000",
      "contentFontSize": 40,
      "paddingLeft": 90,
      "paddingRight": 60,
      "paddingTop": 110,
      "fontFamily": "Microsoft Yahei, serif",
      "bgImgUrl": "https://img.alicdn.com/tps/TB1bymmOFXXXXaxXpXXXXXXXXXX-2201-753.png"
    }
  },
  {
    "lng": 55.3,
    "lat": 25.27,
    "content": {
      "width": 900,
      "height": 350,
      "title": "标题2",
      "titleFontSize": 45,
      "titleColor": "#fbf320",
      "content": "正文",
      "contentColor": "#000",
      "contentFontSize": 40,
      "paddingLeft": 90,
      "paddingRight": 60,
      "paddingTop": 110,
      "fontFamily": "Microsoft Yahei, serif",
      "bgImgUrl": "https://img.alicdn.com/tps/TB1bymmOFXXXXaxXpXXXXXXXXXX-2201-753.png"
    }
  },
  {
    "lng": 119,
    "lat": 30,
    "content": {
      "width": 900,
      "height": 350,
      "title": "标题3",
      "titleFontSize": 45,
      "titleColor": "#fbf320",
      "content": "正文",
      "contentColor": "#000",
      "contentFontSize": 40,
      "paddingLeft": 90,
      "paddingRight": 60,
      "paddingTop": 110,
      "fontFamily": "Microsoft Yahei, serif",
      "bgImgUrl": "https://img.alicdn.com/tps/TB1bymmOFXXXXaxXpXXXXXXXXXX-2201-753.png"
    }
  }
]

表 1. 字段说明
字段	说明
lat	浮框所在位置的纬度。
lng	浮框所在位置的经度。
content	（可选）浮框显示的文本内容。 width：浮框的宽度，单位为px。 height：浮框的高度，单位为px。 title：浮框标题的内容。 titleFontSize：浮框标题的字体大小。 titleColor：浮框标题的颜色。 content：浮框正文的内容。 contentColor：浮框正文的颜色。 contentFontSize：浮框正文的字体大小。 paddingLeft：正文内容距离浮框层左侧的偏移值，单位为px。 paddingRight：正文内容距离浮框层右侧的偏移值，单位为px。 paddingTop：正文内容距离浮框层顶部的偏移值，单位为px。 fontFamily：浮框标题与正文的字体系列（请选择您系统中已安装的字体，如系统中无此字体则会使用默认字体）。 bgImgUrl：浮框层的背景图片的url地址。

表 2. 配置项说明
配置项	说明
受控模式	打开开关，组件初始化状态下不请求数据，仅通过回调id或蓝图编辑器配置的方法发起请求数据；关闭开关，可以使用自动更新请求数据。
自动更新请求	选中后可以设置动态轮询，还可以手动输入轮询的时间频次。
数据源	单击配置数据源，可在设置数据源页面中修改数据源类型和数据查询代码、预览数据源返回结果以及查看数据响应结果。详情请参见配置组件数据。
数据过滤器	单击添加过滤器，可在设置数据源页面中配置数据过滤器，详情请参见组件过滤器使用说明。
数据响应结果	展示数据请求的响应结果。当数据源发生改变时，可单击右侧的图标，实时查看数据响应结果。

交互

此组件没有交互事件。

蓝图编辑器交互配置

在画布编辑器页面，单击3D地球子组件管理列表中浮框层右侧的图标。
单击页面左上角的图标。

在蓝图编辑器配置页面，单击导入节点栏内的浮框层组件，在画布中可以看到如下图所示的浮框层的蓝图编辑器配置参数。浮框层蓝图参数

事件
当数据接口请求完成时：数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的JSON格式的数据。具体数据请参见上文的数据示例。

动作


动作	说明
请求数据接口	重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如浮框层配置了API数据源为`http://api.test`，传到请求数据接口动作的数据为`{ id: '1'}`，则最终请求接口为`http://api.test?id=1`。
导入数据接口	按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据请参见上文的数据示例。
显示	显示组件，不需要参数。
隐藏	隐藏组件，不需要参数。