本视频由 保利威 提供技术支持

视频介绍

地图组件的教程中,我们介绍了地图组件的详细设置,包括地图组件的下钻等,本文主要介绍如何设置地图组件的数据联动。

在使用地图组件的联动功能时,通常是通过点击地图某一个区域,其他组件同步更新显示该区域的数据,效果如下图所示:

在上图中,我们展示了省级区域切换和图片之间的联动,然后下钻到浙江省内,展示了市级区域切换和图片之间的联动,然后下钻到杭州市,展示了县级区域切换和图片之间的联动。

涉及到的四组示例数据如下:

示例数据1:

一级地点 二级地点 三级地点 销售额
浙江省 杭州市 余杭区 1
浙江省 杭州市 萧山区 2
浙江省 杭州市 西湖区 3
浙江省 温州市 永嘉县 4
浙江省 温州市 乐清市 5
浙江省 温州市 瑞安市 6
浙江省 宁波市 北仑区 7
浙江省 宁波市 慈溪市 8
浙江省 宁波市 鄞州区 9
安徽省 合肥市 长丰县 10
安徽省 合肥市 肥东县 11
安徽省 合肥市 巢湖市 12
安徽省 安庆市 潜山县 13
安徽省 安庆市 桐城市 14
安徽省 安庆市 怀宁县 15
安徽省 六安市 霍邱县 16
安徽省 六安市 金寨县 17
安徽省 六安市 霍山县 18

示例数据2:

一级地点 图片
浙江省 https://bingovue.oss-cn-beijing.aliyuncs.com/assets/image/202002181646/red.png
安徽省 https://bingovue.oss-cn-beijing.aliyuncs.com/assets/image/202002181646/green.png

示例数据3:

二级地点 图片
杭州市 https://bingovue.oss-cn-beijing.aliyuncs.com/assets/image/202002181646/red.png
温州市 https://bingovue.oss-cn-beijing.aliyuncs.com/assets/image/202002181646/green.png
宁波市 https://bingovue.oss-cn-beijing.aliyuncs.com/assets/image/202002181646/blue.png

示例数据4:

三级地点 图片
余杭区 https://bingovue.oss-cn-beijing.aliyuncs.com/assets/image/202002181646/red.png
萧山区 https://bingovue.oss-cn-beijing.aliyuncs.com/assets/image/202002181646/green.png
西湖区 https://bingovue.oss-cn-beijing.aliyuncs.com/assets/image/202002181646/blue.png

在使用地图组件和其他组件的数据联动功能时,我们需要进行如下设置:

(1)组件的设置中不一定要使用地点字段,但是组件对应的数据源中必须包含地点字段,且字段名称必须是按照区域行政级别(省/直辖市为一级,以此类推)分别为“一级地点”“二级地点”“三级地点”,如果需要使用英文,名称为“position_level_1”“position_level_1”“position_level_1”,因为软件需要基于地点字段进行数据筛选

(2)需要参与联动的组件都必须在设置中开启“联动下钻”功能

(3)在同时使用地图的下钻和联动时,下钻之后的地图也必须设置字段,例如从省级下钻到市级,则需要给市级地图添加字段,否则市级地图无法实现数据联动

【温馨提示】本教程对应的项目文件在此,大家点击下载参考 →_→ 示例教程

关闭