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

中国地图展示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</