【数据可视化】AntV L7实现地图可视化，DrillDownLayer钻取异步获取数据，悬浮预警框

最新推荐文章于 2024-09-22 22:22:49 发布

椰卤工程师

最新推荐文章于 2024-09-22 22:22:49 发布

阅读量2.7k

点赞数

分类专栏：数据可视化前端开发超级避坑指难文章标签：数据可视化 L7 AntV

本文链接：https://blog.csdn.net/weixin_42224055/article/details/122525106

版权

本文介绍了如何使用AntV L7库构建地图可视化，特别是利用DrillDownLayer进行地图钻取操作。内容涵盖钻取地图的使用方法，包括构造函数参数、自定义交互事件以及异步数据加载。同时展示了如何处理异步获取的省份数据，以展示不同预警值对应的区块颜色，并在无数据时显示【暂无数据】的悬浮框。

摘要由CSDN通过智能技术生成

中国地图展示demo如下：
在这里插入图片描述

一、钻取地图的使用

钻取地图支持两种可视化类型

填充图：在地图上显示每个区域，根据区域值设置区块填充颜色
气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小

1）构造函数

scene L7 scene 对象
option 行政区划配置项
drillDepth number 下钻深度 0 | 1 | 2 1 市级 2，县级
customTrigger 是否自定义下钻交互，默认 false
drillDownTriggerEvent 向下钻取的触发事件 ⛔customTrigger 为 true 时不生效
drillUpTriggleEvent 向上钻取的触发事件 ⛔customTrigger 为 true 时不生效
provinceData 省级数据
cityData 市级数据可以是全量的数据，下钻时可以不需要重新设置数据
countyData 县级数据可以是全量的数据，下钻时可以不需要重新设置数据
joinBy 数据关联，属性数据如何内部空间数据关联绑定目前支持 NAME_CHN,adcode 字段连接对照表 Array [string, string] 第一个值为空间数据字段，第二个为传入数据字段名
label 文本配置项 labelOption
bubble 气泡配置项 bubbleOption
fill 填充配置项 fillOption
province layerOption 省级图层配置，如果不设置等同全局配置
city layerOption 市级图层配置，如果不设置等同全局配置
county layerOption 县级图层配置，如果不设置等同全局配置

2）引入DrillDownLayer

import {
    DrillDownLayer } from '@antv/l7-district';

DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。

3）渲染地图

异步获取省份数据

const draw = async () => {
   
	 let provinceData = [] as any;
	 await getMapList().then((res: any) => {
   
	    provinceData = res.data;
	 });
}

api返回数据格式

{
   
  "code": "",
    "data": {
   
        "list": [
             {
     
                "name": "云南省" , 
                "code" : 530000,  
                "caseNum": 1456, 
                "caseAmount": 133324.6, 
                "startTime": 2022-01-22 21:34:25,
                "endTime": 2022-01-24 23:33:34
             },
             {
     
                "name": "黑龙江省" ,  
                "code" : 230000, 
                "caseNum": 7452, 
                "cas