区域下钻热力层(v2.x版本)

区域下钻热力层是基础平面地图的子组件,可直接作为省或直辖市级、地市级区域热力层使用。支持独立的样式、数据和交互配置,包括下钻区域的标注、边线、鼠标交互事件以及位置信息等。本文介绍区域下钻热力层各配置项的含义。

重要

当前为v2.x版本的区域下钻热力层子组件指导文档,如需查看该子组件v1.x版本的文档内容详情,请参见区域下钻热力层(v1.x版本)

单击子组件管理下方的区域下钻热力层,进入配置面板配置区域下钻热力层的样式和数据。

说明

如果子组件管理中没有区域下钻热力层,说明您还未添加区域下钻热力层子组件,请参见地图容器(v2.x版本)进行添加。

配置

image

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

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

  • 区域样式:设置区域下钻热力层的区域填充颜色和边线样式参数。

    参数

    说明

    填充颜色

    数据中最大、最小及为空的value值对应区域的颜色。

    边线样式

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

  • 标注:设置区域下钻热力层的区域的标注显示字段、文本样式参数。单击标注左侧的眼睛图标图标,可控制标注的显隐。

    参数

    说明

    显示字段

    下钻区域的标注字段,需要与地理数据中字段名称匹配。

    文本样式

    区域下钻热力层各区域文本标注的字体系列、文本粗细、字号、颜色和阴影色,请参见颜色选择器说明进行颜色修改。

    说明

    请选择系统中的字体,如果您的系统中没有所选的字体,标注会使用默认字体。

  • 弹框:在预览或发布页面,单击下钻区域出现的弹框样式。单击弹框左侧的眼睛图标图标,可控制弹框的显隐。

    说明

    开启弹窗功能需要先设置info字段。

    • info字段:单击开关,开启info字段,设置info字段作为弹窗内容,该字段支持配置html标签;如果关闭info字段开关,则兼容namevalue字段内容作为弹窗内容。

    • 事件类型:通过点击区域事件作为弹框显示的类型。

    • 配置选项:弹框样式的配置项内容,可选择父容器默认自定义配置

      • 父容器默认:系统自带的默认样式。

      • 自定义配置:自定义配置弹框的文本样式、行高比例和圆角半径等参数。

        参数

        说明

        文本样式

        设置弹框内文本的字体、文字粗细、字号和颜色,请参见颜色选择器说明进行颜色修改。

        行高比例

        设置弹框格式的行高比例值。

        圆角半径

        设置弹框的圆角半径值,数值越大圆角越圆。

        外边距

        设置弹框内文本与弹框四边的距离。

        背景色

        设置弹框的背景色。

        关闭按钮

        设置关闭弹框按钮的颜色、大小、按钮离顶部的距离和离右侧的距离。

  • 交互配置

    参数

    说明

    悬停样式

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

    双击聚焦

    双击下钻区域,会根据下钻区域位置进行一定范围比例的聚焦,仅在预览或发布时才能看到效果。

数据

区域下钻热力层数据面板v2.x

  • 默认区域

    1. 选择数据页签下的默认区域

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

      区域下钻热力层默认显示全国范围内各省和直辖市区域热力层数据,如下图所示。区域下钻热力层默认区域数据v2.x

      说明

      区域area_id值可以查阅省市区adcode与经纬度映射表

    3. 如果您需要使用地市级区域热力层,可修改area_id值。

      以浙江省为例,通过省市区adcode与经纬度映射表得到浙江省的area_id330000,区域下钻热力层定位至浙江省范围内的所有地级市范围,可以作为地市级区域热力层来使用,其他省或直辖市以此类推。浙江省下钻热力层数据v2.x上图中的示例JSON代码如下。

      [
        {
          "area_id": 330000
        }
      ]
  • 自定义区域数据:自定义区域数据包括area_treearea_topo_json两个字段。自定义区域数据v2.x

    DataV默认显示全国范围内的各省和直辖市的URL链接,层级关系为国家 > 省或直辖市 > 地市级 > 区县级,默认的示例数据如下。

    [
      {
        "area_tree": "https://sh-conf.oss-cn-shanghai.aliyuncs.com/map/area_drill/area_tree.json",
        "area_topo_json": "https://sh-conf.oss-cn-shanghai.aliyuncs.com/map/area_drill/china.topo.new.json"
      }
    ]

    您也可以修改默认数据来自定义下钻区域。以下以浙江省为例,为您展示自定义数据的配置方法。

    1. 参考默认区域的配置方法,修改默认数据的area_id为浙江省的area_id(330000)。自定义数据配置v2.x

    2. 修改默认全国范围的area_tree.json文件,提取浙江省范围的数据。区域层级关系为省或直辖市 > 地市级 > 区县级。文件的部分数据内容如下图所示。全国范围的area_tree.json文件

      重要
      • 用户如果有自定义的层级关系,可以自定义area_id,只要保证area_id是唯一值。

      • 由于获取的JSON数据量比较大,不支持静态数据等配置,只能通过URL链接来访问。

      可下载上图中的完整示例JSON文件

    3. 发布area_json数据文件,并获取URL。

      通过在线静态数据服务,将area_json发布成相应的文件,并获取URL,推荐您使用阿里云的OSS在线静态数据服务。关于文件URL的介绍请参见上传Object后如何获取访问URL

      重要

      通过该服务发布的URL链接必须使用HTTPS协议,并且必须使用SSL证书的域名。

    4. 获取topo_json数据文件。

      1. 登入DataV.GeoAtlas,获取得到浙江省范围的JSON数据(复制如下图所示API地址后打开该网址,另存为.json文件即可。)获取topo_json数据文件

      2. 登入geojson.io网站,单击左上角Open > File,将获取到的浙江省范围的JSON数据添加到geojson.io右侧编辑框内。

      3. 单击左上角Save > TopoJSON,得到浙江省的topo_json文件。得到浙江省的topo_json文件

        说明

        自定义区域合并,可能需要使用turfjs.org这个方法合并两个相邻的区域,得到新的GeoJSON边界数据。

      4. 打开获取到的topo_json文件,在最前面加上浙江省的adcode(330000),并用:分隔,{ }整合,如下图所示。topo_json文件

        上面得到的topo_json文件仅包含了浙江省各市级的区域数据,无法下钻到区县级,如果您需要下钻到区县级区域,需要继续配置topo_json文件。下面以杭州市为例,为您介绍下钻到区县级的数据配置方法。

      5. 参考步骤a~步骤c,得到杭州市的topo_json文件。

      6. 在杭州市的topo_json文件前加上杭州市的adcode(330100),并用:分隔,{ }整合,如下图所示。杭州市的topo_json文件

      7. 将处理后的杭州市的topo_json文件,复制粘贴到浙江省的topo_json文件后面,用英文逗号隔开(注意括号要对应)。添加杭州市的topo_json文件

        可单击此处下载最终的topo_json文件。

    5. 发布topo_json数据文件,并获取URL。

      关于文件URL的介绍请参见上传Object后如何获取访问URL

      重复步骤iii,获取最终的topo_json文件的URL链接。

    6. 配置下钻热力层的自定义区域数据。

      使用新发布出来的两个文件的URL,替换下钻热力层的自定义区域数据的URL,单击预览查看地图上的效果,即可完成自定义数据配置。配置下钻热力层的自定义区域数据上图中的示例数据如下。

      [
        {
          "area_tree": "https://datav-map-test.oss-cn-hangzhou.aliyuncs.com/zhejiang_area_tree.json",
          "area_topo_json": "https://datav-map-test.oss-cn-hangzhou.aliyuncs.com/zhejiang.topojson"
        }
      ]

      预览成功的效果图如下,双击杭州市区域,可进入杭州市地图页面。双击空白处,可回到浙江省地图页面。配置成功结果

      重要

      如果预览时无法显示自定义的下钻区域,可能是所配置的URL存在跨域问题,可在OSS中进行跨域配置,详情请参见设置跨域资源共享

    7. 预览成功后,可单击发布,发布可视化应用。

    使用同样的方式可配置其他省市级的下钻区域数据,数据的规律为国家 > 省或直辖市 > 地市级 > 区县级,即上一级必须包含下一级的区域数据(adcode和位置数据等)才可下钻。

  • 映射数据接口:参见区域热力层数据

交互

区域下钻热力层交互面板v2.x

表 1. 交互说明

交互

说明

当区域被单击触发

选中启用,开启组件交互功能。区域下钻热力层子组件拥有交互配置,可单击某个区域,触发数据请求,抛出回调值,实现在单击某个区域时,动态加载不同区域的数据。

默认抛出所单击区域对应的映射数据接口中的area_id字段值,具体配置请参见组件回调ID配置

说明

此回调ID需要在映射数据接口中的area_id字段配置了区域的adcode值时才可以传递;如果该字段中没有配置adcode值,默认是不回传数据。

当区域被双击触发

选中启用,开启组件交互功能。区域下钻热力层子组件拥有交互配置,可双击某个区域,触发数据请求,抛出回调值,实现在双击某个区域时,动态加载不同区域的数据。

默认抛出所双击区域对应的映射数据接口中的area_id字段值,具体配置请参见组件回调ID配置

说明

此回调ID需要在映射数据接口中的area_id字段配置了区域的adcode值时才可以传递;如果该字段中没有配置adcode值,默认是不回传数据。

当区域上钻时触发

选中启用,开启组件交互功能。区域下钻热力层子组件拥有交互配置,可单击区域范围外侧空白处,触发数据请求,抛出回调值,实现区域上钻时,动态加载不同区域的数据。

默认抛出上钻区域的adcode值,具体配置请参见组件回调ID配置

蓝图编辑器交互配置

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

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

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

    • 事件

      事件

      说明

      当默认区域请求完成时

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

      当自定义区域数据请求完成时

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

      当映射数据接口请求完成时

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

      当默认区域请求失败时

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

      当自定义区域数据请求失败时

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

      当映射数据接口请求失败时

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

      当区域被点击触发

      当区域下钻热力层某一块区域被单击时候触发的事件。

      当区域被双击触发

      当区域下钻热力层某一区域被双击时候触发的事件。

      当区域上钻时触发

      当区域下钻热力层某一区域上钻时候触发的事件。

    • 动作

      动作

      说明

      请求默认区域

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

      请求自定义区域数据

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

      请求映射数据接口

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

      导入默认区域

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

      导入自定义区域数据

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

      导入映射数据接口

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

      显示组件

      显示组件,不需要参数。

      隐藏组件

      隐藏组件,不需要参数。