浮框层是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"
}
}
]| 字段 | 说明 |
|---|---|
| lat | 浮框所在位置的纬度。 |
| lng | 浮框所在位置的经度。 |
| content | （可选）浮框显示的文本内容。
|
| 配置项 | 说明 |
|---|---|
| 受控模式 | 打开开关，组件初始化状态下不请求数据，仅通过回调id或蓝图编辑器配置的方法发起请求数据；关闭开关，可以使用自动更新请求数据。 |
| 自动更新请求 | 选中后可以设置动态轮询，还可以手动输入轮询的时间频次。 |
| 数据源 | 单击配置数据源，可在设置数据源页面中修改数据源类型和数据查询代码、预览数据源返回结果以及查看数据响应结果。详情请参见配置组件数据。 |
| 数据过滤器 | 单击添加过滤器，可在设置数据源页面中配置数据过滤器，详情请参见组件过滤器使用说明。 |
| 数据响应结果 | 展示数据请求的响应结果。当数据源发生改变时，可单击右侧的 图标，实时查看数据响应结果。
|
交互
此组件没有交互事件。
蓝图编辑器交互配置
- 在画布编辑器页面，单击3D地球子组件管理列表中浮框层右侧的
图标。
- 单击页面左上角的
图标。
- 在蓝图编辑器配置页面，单击导入节点栏内的浮框层组件，在画布中可以看到如下图所示的浮框层的蓝图编辑器配置参数。
图标。
图标。
