图标散点层(v3.x版本)

本文介绍图标散点层的图表样式和各配置项的含义。

图表样式

图标散点层是基础平面地图 3.0的子组件,能够以图标散点的形式表现地理位置上的点数据信息。图标散点层支持独立的样式、数据和交互配置,包括图标散点层的图标配置、系列配置、弹框样式以及交互配置等。

image

配置面板

image

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

  • 通用:设置图标散点层的通用配置项。

    参数

    说明

    可见级别

    设置图标散点层的可见级别值,在设定的级别范围内图标散点层可见,级别之外不可见。

    不透明度

    设置图标散点层的不透明度值,取值范围为0~100,单位%,数值越大图层越不透明。

  • 图形:设置图标散点层的图形配置项。image

    参数

    说明

    图标形状

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

    图标尺寸

    设置图标的尺寸样式,包括设置图标的宽度和高度,取值范围为0~400,单位px。

    相对位置

    设置散点图标对于散点的相对位置样式,可选底部中心

    相对偏移

    设置图标从水平方向或者垂直方向的偏移量值,取值范围为-400~400,单位px。

  • 标签:设置图标散点层内标签的样式参数。image

    参数

    说明

    显示标签

    打开开关,图标散点层显示标签样式。

    显示方式

    设置图标散点层的标签显示的方式,可选,包括全显点击悬浮三种方式。

    相对位置

    设置图标散点层的标签的相对位置样式,可选,包括左侧中心右侧顶部底部

    相对偏移

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

    内容样式

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

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

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

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

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

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

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

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

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

    背景样式

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

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

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

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

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

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

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

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

  • 交互:图标散点层的交互配置项。

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

      尺寸缩放:拖动滑块设置图标散点尺寸缩放的范围,取值范围为1~2。

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

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

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

    参数

    说明

    图标形状

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

    图标尺寸

    单击图标尺寸左侧的眼睛图标图标,可控制该条件下的图标散点在宽度和高度尺寸的样式显隐。

    相对位置

    单击相对位置左侧的眼睛图标图标,可控制该条件下的图标散点相对位置样式显隐。

    相对偏移

    单击相对偏移左侧的眼睛图标图标,可控制该条件下的图标散点在水平和垂直方向相对偏移量样式显隐。

  • 自定义弹框样式:设置图标散点层内自定义弹框的样式参数。image

    参数

    说明

    弹框开关

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

    显示方式

    设置图标散点层弹框显示的方式,可选,包括点击悬浮两种方式。

    相对偏移

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

    文本样式

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

    显示空值

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

    弹框样式

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

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

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

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

    • 关闭按钮:打开开关,图标散点层的弹框显示关闭按钮和按钮的颜色。

    • 指向箭头:打开开关,图标散点层的弹框显示指向箭头。

数据面板(默认模式)

image

配置字段说明

字段

说明

lng

散点的经度。

lat

散点的纬度。

name

(可选)散点的标注名称。

value

(可选)散点在配置项内用于数据映射的值,缺失则按无数据配置渲染。

id

(可选)散点的唯一标识信息。

iconUrl

(可选)自定义图标的地址路径。

iconField

(可选)散点的形状映射字段。

popupType

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

info

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

表 2. 配置项说明

配置项

说明

受控模式

打开开关,资产初始化状态下不请求数据,仅通过回调ID或蓝图编辑器配置的方法发起请求数据;关闭开关,可以使用自动更新请求数据。开关默认为关闭状态。

自动更新请求

选中后可以设置动态轮询,还可以手动输入轮询的时间频次。取消选中后则不会自动更新,需要手动刷新页面,或通过蓝图编辑器和回调ID事件来触发请求更新数据。

数据源

单击配置数据源,可在设置数据源面板中修改数据源类型和数据查询代码、预览数据源返回结果以及查看数据响应结果,详情请参见配置资产数据

数据过滤器

数据过滤器提供数据结构转换、筛选和一些简单的计算功能。单击添加过滤器,可在设置数据源面板配置数据过滤器脚本,详情请参见过滤器使用说明

数据响应结果

展示数据请求的响应结果。当数据源发生改变时,可单击右侧的刷新图标 图标,实时查看数据响应结果。

数据面板(分析模式)

image

图标散点层子组件BI分析数据配置面板中的详细操作说明,请参见BI分析模式数据面板功能介绍

配置字段说明

字段

说明

lng

散点的经度。

lat

散点的纬度。

name

(可选)散点的标注名称。

value

(可选)散点在配置项内用于数据映射时的值,缺失则按无数据配置渲染。

id

(可选)散点的唯一标识信息。

iconUrl

(可选)自定义图标的地址路径。

iconField

(可选)散点的颜色映射字段。

popupType

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

info

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

交互面板

image

交互说明

交互

说明

当点击点时

选中启用,开启组件交互功能。图标散点层子组件拥有交互配置,当单击某个散点时抛出回调值,默认抛出数据中的lnglat字段。具体配置请参见如何配置数字翻牌器组件的回调ID

当鼠标移入时

选中启用,开启组件交互功能。图标散点层子组件拥有交互配置,当鼠标移入到散点位置时抛出回调值,默认抛出数据中的lnglat字段。具体配置请参见如何配置数字翻牌器组件的回调ID

蓝图编辑器交互配置

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

    说明

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

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

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

    • 事件

      事件

      说明

      当数据接口请求完成时

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

      当数据接口请求失败时

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

      当点击点时

      当单击图标散点层的散点时抛出的事件,同时抛出该散点对应的经纬度数据项。

      当鼠标移入时

      当鼠标移入图标散点层的散点时抛出的事件,同时抛出该散点对应的经纬度数据项。

    • 动作

      动作

      说明

      请求数据接口

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

      导入数据接口

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

      显示

      显示组件,不需要参数。

      隐藏

      隐藏组件,不需要参数。