区域热力层
区域热力层是基础平面地图的子组件，支持独立的样式、数据和交互配置，包括区域的标注、颜色、边线、鼠标交互事件以及位置信息等，能够以热力区域的形式表现地理位置上的区域信息。本文介绍区域热力层各配置项的含义。
单击子组件管理下方的区域热力层，进入配置面板配置区域热力层的样式和数据。
说明 如果子组件管理中没有区域热力层，说明您还未添加区域热力层子组件，请参见地图容器进行添加。
配置
- 基础设置
- 可见级别：设置区域热力层的可见级别值，在设定的级别范围内区域热力层可见，级别之外不可见。
- 区域样式：设置区域热力层的区域填充颜色和边线样式参数。
| 参数 | 说明 |
|---|---|
| 填充颜色 | 数据中最大、最小及为空的value值对应区域的颜色。 |
| 边线样式 | 区域热力层各区域边线的颜色、粗细和线类型。 |
- 标注：设置区域热力层的区域的标注显示字段、文本样式参数。单击标注左侧的
图标，可控制标注的显隐。
| 参数 | 说明 |
|---|---|
| 显示字段 | 区域的标注字段，需要与地理数据中字段名称匹配。 |
| 文本样式 | 区域热力层各区域文本标注的字体系列、文本粗细、字号、颜色和阴影色。 说明：请选择系统中的字体，如果您的系统中没有所选的字体，标注会使用默认字体。 |
- 弹框：在预览或发布页面，单击区域出现的弹框样式。单击左侧的 图标，可控制弹框的显隐。
说明 开启弹窗功能需要先设置 info 字段。
-
info 字段：单击开关，开启 info 字段，设置 info 字段作为弹窗内容，该字段支持配置 html 标签；如果关闭 **info 字段开关，则兼容 name **和 value 字段内容作为弹窗内容。
-
事件类型：选择通过点击或鼠标移入事件作为弹框显示的类型。
-
配置选项：弹框样式的配置项内容，可选择父容器默认或自定义配置。
- 父容器默认：系统自带的默认样式。
- 自定义配置：自定义配置弹框的文本样式、行高比例、圆角半径等参数。 | 参数 | 说明 | | --- | --- | | 文本样式 | 设置弹框内文本的字体、文字粗细、字号、颜色和阴影色。 | | 行高比例 | 设置弹框格式的行高比例值。 | | 圆角半径 | 设置弹框的圆角半径值，数值越大圆角越圆。 | | 外边距 | 设置弹框内文本与弹框四边的距离。 | | 背景色 | 设置弹框的背景色。 | | 关闭按钮 | 设置关闭弹框按钮的颜色、大小、按钮离顶部的距离和离右侧的距离。 |
-
交互配置
| 参数 | 说明 |
|---|---|
| 悬停样式 | 单击悬停样式 左侧 图标，可控制悬停交互功能的开启或关闭。开启后可设置鼠标悬停时的区域的填充颜色、区域边线颜色和粗细，仅在预览或发布时才能看到效果。 |
| 点击聚焦 | 单击左侧 图标，可控制点击聚焦交互功能的开启或关闭。开启后，单击区域，会根据区域位置进行一定范围比例的聚焦，仅在预览或发布时才能看到效果。 |
数据
- 地理边界geojson数据接口：通过配置地理边界 geojson 数据接口，可将提取到的区域 GeoJSON 边界数据应用到 Uniplore 中，配置方法如下
- 数据提取。
使用GeoJSON行政区划边界提取小工具 Uniplore Geo Atlas，最低可以提取区县级边界数据，区域 adcode 可以查阅省市区adcode与经纬度映射表，提取方法如下。
- 省级：区域热力层默认显示为全国范围内，各个省和直辖市区域热力层数据，可以直接使用。
- 地市级：以提取浙江省范围内所有地级市边界数据为例，提取方法如下图所示。
- 区县级：以提取贵阳市范围内所有区县边界数据为例，提取方法如下图所示。
- 乡镇街道及自定义区域：乡镇街道数据需要用户自己获取。根据需要自定义区域边界，如中国内地可以分为东部地区、西部地区、华南地区、华北地区、华中地区五大区，可以根据对应包含的省级边界数据合并得到。
- 数据应用。
将提取到的数据配置到 Uniplore 中，配置方法如下。
- 选择区域热力层 > 数据 > 地理边界 geojson 数据接口。
- 单击配置数据源，在设置数据源弹出框中，选择数据源类型为 API。
- 将提取到的 JSON API 粘贴到数据输入区。
- 需要设置 Headers 为以下值：
{ "content-type": "text/plain"}，直接复制粘贴即可。如下图所示
- 单击刷新数据按钮，可以看到地图正确渲染了我们给出的链接的区域。
- 返回父组件基础平面地图的配置面板，配置地图中心点和缩放，使视角聚焦于该区域。地图中心点坐标可到高德地图坐标拾取器查询
详情请查阅[自定义地图边界，]上述渲染效果如下所示：
上图中提取到了肇庆市包含子区域的边界信息，示例 API 如下。
https://uniplore-source.oss-cn-chengdu.aliyuncs.com/bigscreen/bound/441200_full.json
在数据配置的过程中，可能会出现区域文字标注有偏移的问题，解决方法如下。
- GeoJSON 提取工具中的数据已更新，需使用新的 GeoJSON API。
- 修改参数。以肇庆市的区县级 GeoJSON 数据为例，高要区文字标注有偏移。
- 使用geojson.io工具，添加** customLabelPosition** 属性参数。
在数据区域找到高要区的** properties **参数，添加自定义"customLabelPosition": [112.500801,22.927694]属性。
-
保存修改后的 API 到您的服务器上。
-
选择区域热力层 > 数据 > 地理边界 geojson 数据接口。
-
单击配置数据源，在设置数据源面板中选择数据源类型为** API**。
-
将修改后的 JSON API 地址粘贴到数据输入区，设置完成后，高要区标注显示正常。
-
热力值数据接口
您可以通过配置热力值数据接口，自定义区域热力层的样式。区域热力层支持数据优先渲染。
- 选择区域热力层 > 数据 > 热力值数据接口。
- 选择数据源类型为静态数据，参数说明如下。
上图中示例代码如下：
[
{
"area_id": "441224",
"value": 64
},
{
"area_id": "441203",
"value": 388
},
{
"area_id": "441202",
"value": 82
},
{
"area_id": "441204",
"value": 478
},
{
"area_id": "441223",
"value": 491
},
{
"area_id": "441224",
"value": 849
},
{
"area_id": "441225",
"value": 273
},
{
"area_id": "441226",
"value": 656
},
{
"area_id": "441284",
"value": 157
}
]
字段说明
| 参数 | 说明 |
|---|---|
| area_id | 区域的adcode编号，可通过Uniplore Geo Atlas获取。 |
| value | 地区的值，与配置面板中填充颜色的最大值、最小值、无数据配置项配合使用，可控制对应区域的颜色。 |
| 说明:根据数据的value区间得出scale区间，从而计算从最大到最小的颜色渐变区间。 | |
| info | （可选）弹窗内容。 |
- 您也可以在数据源中配置** color**（线颜色）、weight（线宽）、dashArray（虚线）、fillColor（填充颜色）等字段。
地图中对应的区域将根据您设置的参数进行渲染。其中fillColor支持red、#fff000、rgba(0,256,0,0.5)三种形式设置参数，如下图所示
配置项说明
| 配置项 | 说明 |
|---|---|
| 受控模式 | 打开开关，组件初始化状态下不请求数据，仅通过回调ID或蓝图编辑器配置的方法发起请求数据；关闭开关，可以使用自动更新请求数据。 |
| 自动更新请求 | 选中后可以设置动态轮询，还可以手动输入轮询的时间频次。 |
| 数据源 | 可在数据接口下拉选项中修改数据源类型或数据查询代码。 |
| 数据响应结果 | 展示数据请求的响应结果。当数据源发生改变时，可刷新数据后查看响应数据，实时查看数据响应结果。 |
交互
选中启用，开启组件交互功能。区域热力层子组件拥有交互配置，可单击某个区域、鼠标移入区域或鼠标移出区域时，触发数据请求，抛出回调值，实现在单击、鼠标移入或移出某个区域时，动态加载不同区域的数据。默认抛出所单击区域的area_id值，具体配置请参见[回调ID实现图表联动功能。]
| 动作 | 说明 |
|---|---|
| 请求地理边界 geojson 数据接口 | 重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如区域热力层配置了 API数据源为http://api.test，传到请求地理边界geojson数据动作的数据为{ id: '1'}，则最终请求接口为http://api.test?id=1。 |
| 请求热力值数据接口 | 重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如区域热力层配置了 API 数据源为[http://api.test](http://api.test)，传到请求热力值数据动作的数据为{ id: '1'}，则最终请求接口为[http://api.test?id=1](http://api.test?id=1)。 |
| 导入地理边界 geojson 数据接口 | 按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据请参见上文的数据示例。 |
| 导入热力值数据接口 | 按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据请参见上文的数据示例。 |
| 显示 | 显示组件，不需要参数。 |
| 隐藏 | 隐藏组件，不需要参数。 |
| 动作 | 说明 |
|---|---|
| 请求地理边界 geojson 数据接口 | 重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如区域热力层配置了 API数据源为http://api.test，传到请求地理边界geojson数据动作的数据为{ id: '1'}，则最终请求接口为http://api.test?id=1 |
| 请求热力值数据接口 | 重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如区域热力层配置了 API 数据源为[http://api.test](http://api.test)，传到请求热力值数据动作的数据为{ id: '1'}，则最终请求接口为[http://api.test?id=](http://api.test?id=1)1 |
| 导入地理边界 geojson 数据接口 | 按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据请参见上文的数据示例。 |
| 导入热力值数据接口 | 按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据请参见上文的数据示例。 |
| 显示 | 显示组件，不需要参数。 |
| 隐藏 | 隐藏组件，不需要参数。 |
蓝图编辑器交互配置
- 在画布编辑器页面，单击基础平面地图子组件管理列表中区域热力层右侧的
图标。 - 单击页面左上角的 图标。
- 在蓝图编辑器配置页面，单击导入节点栏内的区域热力层组件，在画布中可以看到如下图所示的区域热力层的蓝图编辑器配置参数。
- 事件
| 事件 | 说明 |
|---|---|
| 当地理边界geojson数据接口请求完成时 | 地理边界 geojson 数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的 JSON 格式的数据。具体数据请参见上文的[数据示例]。 |
| 当热力值数据接口请求完成时 | 热力值数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的 JSON 格式的数据。具体数据请参见上文的[数据示例]。 |
| 点击区域时 | 当单击区域热力层某一块区域时抛出。 |
| 鼠标移入区域触发 | 当鼠标移入区域热力层的某一区域块时触发事件并抛出数据。 |
| 鼠标移出区域触发 | 当鼠标移出区域热力层的某一区域块时触发事件并抛出数据。 |
- 动作
| 动作 | 说明 |
|---|---|
| 请求地理边界 geojson 数据接口 | 重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如区域热力层配置了 API数据源为http://api.test，传到请求地理边界geojson数据动作的数据为{ id: '1'}，则最终请求接口为http://api.test?id=1。 |
| 请求热力值数据接口 | 重新请求服务端数据，上游数据处理节点或图层节点抛出的 数据将作为参数。例如区域热力层配置了 API 数据源为[http://api.test](http://api.test)，传到请求热力值数据动作的数据为{ id: '1'}，则最终请求接口为[http://api.test?id=1](http://api.test?id=1)。 |
| 导入地理边界 geojson 数据接口 | 按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据请参见上文的[数据示例]。 |
| 导入热力值数据接口 | 按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据请参见上文的[数据示例]。 |
| 显示 | 显示组件，不需要参数。 |
| 隐藏 | 隐藏组件，不需要参数。 |