antd charts实现地图下钻

一直好奇为什么百度几乎看不到，使用antd封装的charts做的地图下钻，后来发现可能是太简单了大家都不屑写，那我写，我是小白啥也不懂

地图组件：

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { AreaMap } from '@ant-design/maps';
import styles from '../../../../public.less';
import { Button, Radio } from 'antd';

const GovMap = () => {
  const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
  const [province, setProvince] = useState("");
  const [district, setDistrict] = useState("");
  const [parentCode, setParentCode] = useState("");

  useEffect(() => {
    // 加meta标签解决跳转第三方接口报错403，referrer请求头问题
    const addMeta = () => {
      //在head标签插入meta标签，解决在生产环境链接失效问题
      const metaTag = document.getElementsByTagName('meta');
      let isHasTag = true;
      for (let i = 0; i < metaTag.length; i++) {   //避免重复插入meta标签 
        const httpEquiv = metaTag[i].httpEquiv;
        if (httpEquiv == 'Content-Security-Policy') {
          isHasTag = false;
        }
      }
      if (isHasTag) {
        const headItem = document.head;
        let oMeta = document.createElement('meta');
        oMeta.setAttribute('name','referrer');
        oMeta.setAttribute('content','never');
        headItem.appendChild(oMeta);
      }
    }
    addMeta();
    fetch("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json", {
      method: "GET",
    }).then(res => res.json()).then(json => {
      setData(json);
      console.log("地区json", json);
    });
  }, []);
  const color = ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'];
  const config = {
    map: {
      type: 'mapbox',
      style: 'blank',
      center: [120.19382669582967, 30.258134],
      zoom: 3,
      pitch: 0,
    },
    source: {
      data: data,
      // joinBy: {
      //   sourceField: 'regionCode',
      //   geoField: 'regionCode',
      // },
      parser: {
        type: 'geojson',
      },
    },
    // viewLevel: {
    //   level: 'country',
    //   adcode: 100000,
    //   granularity: 'city',
    // },
    autoFit: true,
    color: {
      // 元素映射关联的字段
      field: 'childrenNum',
      value: color,
      scale: {
        type: 'quantize',
      },
    },
    style: {
      opacity: 1,
      stroke: '#ccc',
      lineWidth: 0.6,
      lineOpacity: 1,
    },
    label: {
      visible: true,
      field: 'name',
      style: {
        fill: '#000',
        opacity: 0.8,
        fontSize: 10,
        stroke: '#fff',
        strokeWidth: 1.5,
        textAllowOverlap: false,
        padding: [5, 5],
      },
    },
    state: {
      active: {
        stroke: 'black',
        lineWidth: 1,
      },
    },
    // 悬浮在地图上的数据
    // tooltip: false,
    // tooltip: {
    //   items: ['name', 'size'],
    // },
    zoom: false,
    // 左下角小列表
    legend: false,
  };
  const onInto = (chart) => {
    chart.on('areaLayer:click', (params) => {
      const { feature = {} } = params;
      const { properties = {} } = feature;
      const { name, level, parent = {} } = properties;
      setParentCode(parent.adcode);
      level == 'province' && setProvince(params.feature.properties.name);
      level == 'city' && setDistrict(params.feature.properties.name);
      const id = params.feature.properties.adcode;
      fetch(`https://geo.datav.aliyun.com/areas_v3/bound/${id}_full.json`, {
        method: "GET",
        headers: {
          referer: 'never'
        }
      }).then(res => res.json()).then(json => {
        setData(json);
        console.log("地区json", json);
      });
    });
    chart.on('areaLayer:mousemove', (params) => {
      // console.log("鼠标滑动",params);
    })
  }
  const onChina = () => {
    fetch("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json", {
      method: "GET",
    }).then(res => res.json()).then(json => {
      setData(json);
      setProvince("");
      setDistrict("");
      console.log("地区json", json);
    });
  }
  const onProvince = () => {
    if (district !== "") {
      parentCode && fetch(` https://geo.datav.aliyun.com/areas_v3/bound/${parentCode}_full.json`, {
        method: "GET",
      }).then(res => res.json()).then(json => {
        setData(json);
        setDistrict("");
        console.log("地区json", json);
      });
    }
  }
  return (
    <>
      <div className={styles['govmap-map-wrapper']}>
        <div className={styles['govmap-map-area']}>
          {/* <div><Button>全国</Button></div> */}
          <div><Radio checked='true' onClick={onChina}>全国</Radio></div>
          <div>{province && <Radio checked='true' onClick={onProvince}>{province}</Radio>}</div>
          <div>{district && <Radio checked='true'>{district}</Radio>}</div>
        </div>
        <div className={styles['govmap-map-map']}>
          <AreaMap {...config} onReady={onInto} />
        </div>
      </div>
    </>
  );
};

export default GovMap;

我在里面加了一段其他大佬写的增加meta标签的代码，主要原因是部署到服务器时显示403，也就是说产生跨域问题了，因为这个接口是第三方接口，请求时会产生一个referrer的请求头，所以直接403获取不到，加个meta标签就可以解决，地图下钻就是这么简单