文档

区域热力层(v3.x版本)

更新时间:

本文介绍区域热力层的图表样式和各配置项的含义。

图表样式

区域热力层是基础平面地图 3.0的子组件,支持独立的样式、数据和交互配置,包括区域的标注、颜色、边线、鼠标交互事件以及位置信息等,能够以热力区域的形式表现地理位置上的区域信息。image

配置面板image

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

  • 通用:设置区域热力层的通用配置参数项。

    参数

    说明

    可见级别

    设置区域热力层的可见级别值,在设定的级别范围内区域热力层可见,级别之外不可见。

    不透明度

    设置区域热力层的不透明度值,取值范围为0~100,单位%。数值越大热力层样式越不透明。

  • 图形:设置区域热力层的图形样式参数项。区域填充颜色和边线样式参数。image

    参数

    说明

    填充颜色

    数据中最大、最小及为空的value值对应区域的颜色。请参见颜色映射器使用说明,配置不同区域的映射颜色样式。

    描边样式

    区域热力层各区域边线的颜色、粗细和线的类型。

    说明

    线型支持数字输入,如:4,4,第一个数字表示实线长度,第二个数字表示间隔长度。

    填充纹理

    单击填充纹理左侧的眼睛图标图标,可控制区域块的填充纹理样式显隐。

    • 纹理形状:区域纹理的形状样式,请参见形状映射器使用说明,配置不同区域的填充纹理的映射形状样式。

    • 纹理颜色:请参见颜色映射器使用说明,配置不同区域的纹理映射颜色样式。

    • 平铺尺寸:区域纹理的平铺尺寸样式,包括调整纹理的宽度值和高度值,单位px。

  • 标签:设置区域热力层的区域的标签配置项参数。image

    • 显示标签:区域的标签样式,单击显示标签左侧的眼睛图标图标,可控制显示标签的显隐。

    • 显示方式:区域标签的显示方式,可选全显点击悬浮

    • 内容样式:区域标签的内容样式参数配置项。

      参数

      说明

      每行样式

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

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

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

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

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

      字段宽度

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

      行高比例

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

      内容描边

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

      内容阴影

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

    • 背景样式:设置区域标签的背景样式参数,单击背景样式左侧的眼睛图标图标,可控制背景样式的显隐。

      参数

      说明

      背景类型

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

      背景颜色

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

      边框样式

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

      边框圆角

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

      图片模板

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

      不透明度

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

      内容边距

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

  • 交互:区域热力层的交互配置项。image

    • 图形交互

      参数

      说明

      点击聚焦

      单击左侧眼睛图标图标,可控制点击聚焦交互功能的开启或关闭。开启后,单击区域,会根据区域位置进行一定范围比例的聚焦,仅在预览或发布时才能看到效果。

      悬停样式

      单击悬停样式左侧眼睛图标图标,可控制悬停交互功能的开启或关闭。开启后可设置鼠标悬停时的区域的填充颜色、区域描边线颜色和粗细,仅在预览或发布时才能看到效果。

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

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

    参数

    说明

    图形

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

    填充颜色

    单击填充颜色左侧的眼睛图标图标,可控制该条件下的区域填充颜色的显隐。

    填充纹理

    单击填充纹理左侧的眼睛图标图标,可控制该条件下的区域的填充纹理样式显隐。

    • 纹理形状:单击纹理形状左侧的眼睛图标图标,可控制该条件下的区域的纹理形状样式的显隐。

    • 纹理颜色:单击纹理颜色左侧的眼睛图标图标,可控制该条件下的区域的纹理颜色的显隐。

    • 平铺尺寸:单击平铺尺寸左侧的眼睛图标图标,可控制该条件下的区域的平铺尺寸样式的显隐。包括可调整纹理的宽度值和高度值,单位px。

  • 自定义弹框样式:设置区域热力层内自定义弹框的样式参数。image

    参数

    说明

    弹框开关

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

    显示方式

    设置区域热力层弹框显示的方式,可选,包括点击悬浮两种方式。

    相对偏移

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

    文本样式

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

    显示空值

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

    弹框样式

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

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

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

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

    • 关闭按钮:打开开关,区域热力层的弹框显示关闭按钮和按钮的颜色。

    • 指向箭头:打开开关,区域热力层的弹框显示指向箭头。

数据面板(默认模式)

  • 数据接口image

    您可以通过配置数据接口,自定义区域热力层的样式。区域热力层支持数据优先渲染。

    1. 选择区域热力层 组件数据页签下的数据接口

    2. 单击配置数据源,在设置数据源面板中,选择数据源类型静态数据,参数说明如下。

      配置字段说明

      字段

      说明

      adcode

      区域的adcode编号,可通过DataV.GeoAtlas获取。

      name

      (可选)地区的名称。

      value

      (可选)地区的值,与配置面板中填充颜色的最大值、最小值、无数据配置项配合使用,可控制对应区域的颜色。

      说明

      根据数据的value区间得出scale区间,从而计算从最大到最小的颜色渐变区间。

      geometry

      (可选)地区的平面空间数据。

      colorField

      (可选)地区的颜色映射字段。

      textureShapeField

      (可选)地区的纹理形状映射字段。

      textureColorField

      (可选)地区的纹理颜色映射字段。

      popupType

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

      info

      (可选)自定义弹窗内容,支持HTML片段。

  • 地理边界geojson数据接口image

    通过配置地理边界geojson数据接口,可将提取到的区域GeoJSON边界数据应用到DataV中,配置方法如下。

    1. 登录DataV.GeoAtlas,选择范围选择器

    2. 参见范围选择器功能详解,提取并保存定海区的JSON API。

      https://geo.datav.aliyun.com/areas_v3/bound/330902.json
      说明
    3. 将提取到的JSON API粘贴到数据输入区。image

    4. 单击image图标,预览设置数据源后的结果。image

    配置项

    说明

    受控模式

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

    自动更新请求

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

    数据源

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

    数据过滤器

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

    数据响应结果

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

    文字标注偏移问题

    在数据配置的过程中,可能会出现区域文字标注有偏移的问题,解决方法如下。

    • 查看当前区域热力层版本,目前可以使用的区域热力层组件包括区域热力层v0.2.4及以上版本。如果您使用的区域热力层版本较低,需要先删除该层,再重新添加。

    • GeoJSON提取工具中的数据已更新,需重新下载新的GeoJSON数据文件。

    • 修改参数。

      肇庆市的区县级GeoJSON数据为例,高要区文字标注有偏移。地理位置偏移

      1. 使用DataV.GeoAtlas边界生成器工具,上传肇庆市的区县级GeoJSON数据文件,在属性表面板中添加customLabelPosition属性参数。

        属性表面板找到高要区的参数,编辑并新增一列customLabelPosition属性列,添加自定义"customLabelPosition": [112.500801,22.927694]属性。

        图 1. 修改属性修改属性

        图 2. 查看修改的属性查看修改的属性

      2. 保存修改后,将GeoJson文件下载到本地。

      3. 选择区域热力层 > 数据 > 数据接口

      4. 单击配置数据源,在设置数据源面板中选择数据源类型静态数据

      5. 将修改后新生成的文件粘贴到数据输入区,设置完成后,高要区标注显示正常。

数据面板(分析模式)image

区域热力层子组件BI分析数据配置面板中的详细操作说明,请参见BI分析模式数据面板功能介绍

配置字段说明

字段

说明

adcode

区域的adcode编号。

name

(可选)地区的名称。

value

(可选)地区的值,与配置面板中填充颜色的最大值、最小值、无数据配置项配合使用,可控制对应区域的颜色。

说明

根据数据的value区间得出scale区间,从而计算从最大到最小的颜色渐变区间。

geometry

(可选)地区的平面空间数据。

colorField

(可选)地区的颜色映射字段。

textureShapeField

(可选)地区的纹理形状映射字段。

textureColorField

(可选)地区的纹理颜色映射字段。

popupType

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

info

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

交互面板image

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

蓝图编辑器交互配置

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

    说明

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

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

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

    • 事件

      事件

      说明

      当数据接口请求完成时

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

      当地理边界geojson数据接口请求完成时

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

      当数据接口请求失败时

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

      当地理边界geojson数据接口请求失败时

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

      点击区域时

      当单击区域热力层某一块区域时抛出。

      当区域被双击触发

      当区域热力层某一块区域被双击触发时抛出数据。

      鼠标移入区域触发

      当鼠标移入区域热力层的某一区域块时触发事件并抛出数据。

      鼠标移出区域触发

      当鼠标移出区域热力层的某一区域块时触发事件并抛出数据。

    • 动作

      动作

      说明

      请求数据接口

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

      请求地理边界geojson数据接口

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

      导入数据接口

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

      导入地理边界geojson数据接口

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

      显示

      显示组件,不需要参数。

      隐藏

      隐藏组件,不需要参数。