呼吸气泡层(v3.x版本)

本文介绍呼吸气泡层的图表样式和各配置项的含义。

图表样式

呼吸气泡层是基础平面地图 3.0的子组件,支持独立的样式、数据和交互配置,包括呼吸气泡的大小、动画效果、气泡类型以及经纬度等,能够以呼吸气泡的形式表现地理位置上的点数据信息。

image

配置面板

image
  • 搜索配置:单击配置面板右上角的搜索配置,可在搜索配置面板中输入您需要搜索的配置项名称,快速定位到该配置项,系统支持模糊匹配。详情请参见搜索资产配置
  • 通用:设置呼吸气泡层的通用配置项。

    参数

    说明

    可见级别

    设置呼吸气泡层的可见级别值,在设定的级别范围内呼吸气泡层可见,级别之外不可见。

    不透明度

    设置呼吸气泡层的不透明度值,取值范围为0~100,单位%,数值越大图层越不透明。

  • 图形:设置呼吸气泡层的图形配置项,包括气泡的形状样式、半径大小样式和气泡颜色样式。

    参数

    说明

    气泡形状

    设置气泡的形状样式,请参见形状映射器使用说明,配置不同气泡的映射形状样式。

    气泡半径

    设置呼吸气泡的半径大小值,请参见尺寸映射器使用说明,配置不同气泡的映射半径大小。

    气泡颜色

    设置气泡的颜色样式,请参见颜色映射器使用说明,配置不同气泡的映射颜色样式。

  • 动效:设置呼吸气泡的动画效果和变化速率等参数。

    参数

    说明

    动画效果

    设置呼吸气泡层的动画效果,包括呼吸渐显两种。

    变化速率

    设置呼吸气泡层的动效变化速率,取值范围为0~2,数值越大,气泡动画播放速率越快。

  • 标签:设置呼吸气泡层内标签的样式参数。image

    参数

    说明

    显示标签

    打开开关,呼吸气泡层显示标签样式。

    显示方式

    设置呼吸气泡层的标签显示的方式,可选,包括点击悬浮两种方式。

    相对位置

    设置呼吸气泡层的标签的相对位置样式,可选,包括左侧中心右侧顶部底部

    相对偏移

    设置呼吸气泡层的标签在水平和垂直方向的相对偏移值,单位px,取值范围为-100~100。

    内容样式

    设置呼吸气泡层的标签的内容样式。单击每行样式右侧的加号图标垃圾桶图标图标,添加或删除一个每行内容样式。 单击横排列图标竖排列图标图标配置多个每行内容容样式的排列方式。单击复制图标图标,即可复制当前选中内容样式配置内容并新增一个同样配置的每行内容。

    • 行字段:行内容的字段名称,需要和数据面板中的字段相匹配。

    • 字段样式:设置行字段样式,包括字段的字体样式、字号大小、颜色和粗细值。

    • 字段前缀:设置字段前缀的具体内容 、内容间隔值、字体、字号大小、颜色和粗细值。单击字段前缀左侧的眼睛图标图标,可控制字段前缀样式的显隐。

    • 字段后缀:设置字段后缀的具体内容 、内容间隔值、字体、字号大小、颜色和粗细值。单击字段后缀左侧的眼睛图标图标,可控制字段后缀样式的显隐。

    • 字段宽度:标签的显示字段的宽度样式,包括字段的适应类型方式,可选自适应固定宽度,并根据适应类型设置字段宽度的值,单位px。

    • 行高比例:标签的行高比例值,取值范围为1~2。

    • 内容描边:标签的内容描边样式,包括设置描边的颜色和描边粗细值,单击内容描边左侧的眼睛图标图标,可控制内容描边的显隐。

    • 内容阴影:标签的内容阴影样式,包括设置阴影的颜色、阴影模糊值和阴影偏移度在x和y方向上的值,单击内容阴影左侧的眼睛图标图标,可控制内容阴影的显隐。

    背景样式

    设置呼吸气泡层内标签的背景样式参数,单击背景样式左侧的眼睛图标图标,可控制背景样式的显隐。

    • 背景类型:标签背景的类型,可选矢量图片

    • 背景颜色:设置标签的背景颜色,仅在背景类型选择矢量时可配置。

    • 边框样式:设置标签边框的样式,包括边框的线类型,线宽的值和颜色。仅在背景类型选择矢量时可配置。

    • 边框圆角:设置标签边框的圆角在四个方向的值,单位px。仅在背景类型选择矢量时可配置。

    • 图片模板:选择背景图片的模板样式,仅在图片模板选择图片时可配置。

    • 不透明度:设置背景图片的不透明度值,取值范围为0~100,仅在图片模板选择图片时可配置。

    • 内容边距:设置标签中的内容距离上下左右四个方向的边距值。

  • 交互:呼吸气泡层的交互配置项。

    • 图形交互:在预览或发布页面,单击气泡出现的图形交互样式。单击图形交互左侧的眼睛图标图标,可控制图形交互的显隐。

      参数

      说明

      尺寸缩放

      拖动滑块设置气泡尺寸缩放的范围,取值范围为1~2。

      气泡颜色

      设置气泡的颜色。

  • 条件:条件样式说明。image

    条件样式:单击右侧的加号图标垃圾桶图标图标,添加或删除一个条件样式。 单击横排列图标竖排列图标图标配置多个条件样式的排列样式。单击复制图标图标,即可复制当前选中条件样式配置内容并新增一个同样配置的条件样式。具体配置请参见条件树使用说明

    图形:打开开关,配置该样式中的图形配置项;关闭开关,无法配置该样式下的图形配置项。

    参数

    说明

    气泡形状

    单击气泡形状左侧的眼睛图标图标,可控制该条件下的气泡形状样式的显隐。

    气泡半径

    单击气泡半径左侧的眼睛图标图标,可控制该条件下的气泡半径大小样式的显隐。

    气泡颜色

    单击气泡颜色左侧的眼睛图标图标,可控制该条件下的气泡颜色样式显隐。

  • 自定义弹框样式:设置呼吸气泡层内自定义弹框的样式参数。image

    参数

    说明

    弹框开关

    打开开关,可以通过点击悬浮触发弹框。

    显示方式

    设置呼吸气泡层弹框显示的方式,可选,包括点击悬浮两种方式。

    相对偏移

    设置弹窗在水平和垂直方向的相对偏移像素距离,取值范围为-1000~1000,单位px。

    文本样式

    设置弹框内的文本样式,包括文本的字体样式、字号大小、颜色和文本粗细值。

    显示空值

    打开开关,在无info字段或空info字段对象上可以弹框显示为“无数据”。

    弹框样式

    • 内边距:设置弹框文本的内容距离上下左右四个方向的边距值。

    • 边框样式:设置弹框边框的圆角值、线宽和颜色。

    • 背景颜色:设置弹框的背景颜色

    • 投影样式:设置弹框投影的模糊色、模糊半径、X偏移和Y偏移。

    • 关闭按钮:打开开关,呼吸气泡层的弹框显示关闭按钮和按钮的颜色。

    • 指向箭头:打开开关,呼吸气泡层的弹框显示指向箭头。

数据面板(默认模式)

image

配置字段说明

字段

说明

lng

气泡的经度。

lat

气泡的纬度。

name

(可选)气泡的名称。

value

(可选)气泡的值。

id

气泡的ID标识码。

markerField

(可选)气泡的形状映射字段。

radiusField

(可选)气泡的半径大小映射字段。

colorField

(可选)气泡的颜色映射字段。

popupType

(可选)弹窗类型(需要搭配二次开发功能使用)。

info

(可选)自定义弹窗内容。

表 1. 配置项说明
配置项说明
受控模式打开开关,资产初始化状态下不请求数据,仅通过回调ID或蓝图编辑器配置的方法发起请求数据;关闭开关,可以使用自动更新请求数据。开关默认为关闭状态。
自动更新请求选中后可以设置动态轮询,还可以手动输入轮询的时间频次。取消选中后则不会自动更新,需要手动刷新页面,或通过蓝图编辑器和回调ID事件来触发请求更新数据。
数据源单击配置数据源,可在设置数据源面板中修改数据源类型和数据查询代码、预览数据源返回结果以及查看数据响应结果,详情请参见配置资产数据
数据过滤器数据过滤器提供数据结构转换、筛选和一些简单的计算功能。单击添加过滤器,可在设置数据源面板配置数据过滤器脚本,详情请参见过滤器使用说明
数据响应结果展示数据请求的响应结果。当数据源发生改变时,可单击右侧的刷新图标 图标,实时查看数据响应结果。

数据面板(分析模式)

image

呼吸气泡层子组件BI分析数据配置面板中的详细操作说明,请参见BI分析模式数据面板功能介绍

配置字段说明

字段

说明

lng

气泡的经度。

lat

气泡的纬度。

name

(可选)气泡的名称。

value

(可选)气泡的值。

id

气泡的ID标识码。

markerField

(可选)气泡的形状映射字段。

radiusField

(可选)气泡的半径大小映射字段。

colorField

(可选)气泡的颜色映射字段。

popupType

(可选)弹窗类型(需要搭配二次开发功能使用)。

info

(可选)自定义弹窗内容。

交互面板image

选中启用,开启组件交互功能。呼吸气泡层子组件拥有交互配置,可单击某个气泡和鼠标移入气泡时,触发数据请求,抛出回调值,实现在单击和鼠标移入某个气泡时,动态加载不同区域的数据。默认抛出所单击区域的lnglat值,具体配置请参见如何配置数字翻牌器组件的回调ID

蓝图编辑器交互配置

  1. 在画布编辑器页面,单击基础平面地图 3.0子组件管理列表中呼吸气泡层右侧的导出到蓝图编辑器图标。

    说明

    以BI分析模式添加的子组件无蓝图交互功能。

  2. 单击页面左上角的蓝图图标图标。

  3. 在蓝图编辑器配置页面,单击导入节点栏内的呼吸气泡层组件,在画布中可以看到如下图所示的呼吸气泡层的蓝图编辑器配置参数。呼吸气泡层蓝图参数

    • 事件

      事件

      说明

      当数据接口请求完成时

      数据接口请求返回并经过过滤器处理后抛出的事件,同时抛出处理后的JSON格式的数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据页签的数据响应结果区域。

      当数据接口请求失败时

      数据接口请求失败时(请求失败的情况可能是:网络问题或接口报错等)返回并经过过滤器处理后抛出的事件,同时抛出处理后的JSON格式的数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据页签的数据响应结果区域。

      当点击点时

      当单击呼吸气泡层某一个气泡时抛出。

      当鼠标移入时

      当鼠标移入呼吸气泡层的某一气泡时触发事件并抛出数据。

    • 动作

      动作

      说明

      请求数据接口

      重新请求服务端数据,上游数据处理节点或图层节点抛出的数据将作为参数。例如呼吸气泡层配置了API数据源为https://api.test,传到请求数据接口动作的数据为{ id: '1'},则最终请求接口为https://api.test?id=1

      导入数据接口

      按组件绘制格式处理数据后,导入组件,重新绘制。不需要重新请求服务端数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据页签的数据响应结果区域。

      显示

      显示组件,不需要参数。

      隐藏

      隐藏组件,不需要参数。

阿里云首页 DataV数据可视化 相关技术圈