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

单击子组件管理下方的浮框层,进入配置面板配置浮框层的样式和数据。
说明 如果子组件管理中没有浮框层,说明您还未添加浮框层子组件,请参见地图容器进行添加。

配置

浮框层配置面板
  • 浮框高度:浮框层与地球球体之间的距离。
  • 配置

    浮框大小:浮框层的大小。

数据

浮框层数据配置

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

[
  {
    "type": "dom",
    "id": 1,
    "latlngs": {
      "lng": -180.1904296,
      "lat": 7.29701788
    },
    "content": {
      "title": "NO.2",
      "content": "正文正文正文正文",
      "width": 900,
      "height": 350,
      "paddingLeft": 90,
      "paddingRight": 60,
      "paddingTop": 110,
      "titleFontSize": 45,
      "titleColor": "#fbf320",
      "contentColor": "#000",
      "contentFontSize": 40,
      "fontFamily": "Microsoft Yahei, serif",
      "bgImgUrl": "https://img.alicdn.com/tps/TB1bymmOFXXXXaxXpXXXXXXXXXX-2201-753.png"
    }
  },
  {
    "type": "dom",
    "id": 2,
    "latlngs": {
      "lng": -20.83203125,
      "lat": 13.94426488
    },
    "content": {
      "title": "NO.1",
      "content": "正文正文正文正文",
      "width": 900,
      "height": 350,
      "paddingLeft": 90,
      "paddingRight": 60,
      "paddingTop": 110,
      "titleFontSize": 45,
      "titleColor": "#fbf320",
      "contentColor": "#000",
      "contentFontSize": 40,
      "fontFamily": "Microsoft Yahei, serif",
      "bgImgUrl": "https://img.alicdn.com/tps/TB1bymmOFXXXXaxXpXXXXXXXXXX-2201-753.png"
    }
  }
]
表 1. 字段说明
字段 说明
type 浮框的类型。
id 浮框的ID。
latlngs 浮框所在位置的经纬度。
content 浮框显示的文本内容,包含以下字段:
  • title:浮框标题的内容。
  • content:浮框正文的内容。
  • width:浮框的宽度,单位为px。
  • height:浮框的高度,单位为px。
  • paddingLeft:正文内容距离浮框层左侧的偏移量,单位为px。
  • paddingRight:正文内容距离浮框层右侧的偏移量,单位为px。
  • paddingTop:正文内容距离浮框层顶部的偏移量,单位为px。
  • titleFontSize:浮框标题的字体大小。
  • titleColor:浮框标题的颜色。
  • contentColor:浮框正文的颜色。
  • contentFontSize:浮框正文的字体大小。
  • fontFamily:浮框标题与正文的字体系列(请选择您系统中已安装的字体,如系统中无此字体则会使用默认字体)。
  • bgImgUrl:浮框层背景图片的URL地址。

交互

此组件没有交互事件。

蓝图编辑器交互配置

  1. 在画布编辑器页面,单击3D球形地图子组件管理列表中浮框层右侧的导出到蓝图编辑器图标。
  2. 单击页面左上角的蓝图图标图标。
  3. 在蓝图编辑器配置页面,单击导入节点栏内的浮框层组件,在画布中可以看到如下图所示的浮框层的蓝图编辑器配置参数。浮框层蓝图参数
    • 事件

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

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