dashboard/src/components/MapCountry.jsx

import { useContext, useState, useEffect, useMemo } from 'react';
import { observer } from 'mobx-react';
import { ChoroplethMap } from '@ant-design/maps';
import { dataFieldAlias } from '../libs/ht';
import { cloneDeep } from '../utils/commons';

export default observer((props) => {
  const { dataSource, sourceField, valueField, containerNode, ...extConfig } = props;

  const [mdataSource, setMdataSource] = useState([]);
  useEffect(() => {
    const dataMapped = (cloneDeep(dataSource) || []).reduce((r, v) => ({...r,
      [(v[sourceField] || '_').replace('(待删除)', '')]: v
    }), {});
    if (dataMapped?.['中国']) {
      dataMapped['中国'][sourceField] = '中华人民共和国';
    }
    setMdataSource(Object.values(dataMapped));
    return () => {};
  }, [dataSource, valueField]);

  const config = {
      container: containerNode || '#topC',
      map: {
        // type: 'amap',
        type: 'mapbox',
        // style: 'blank',
        center: [120.19382669582967, 30.258134],
        zoom: 2,
        pitch: 0,
        // scrollZoom: false,
        // dragPan: false,
        // zoomEnable: false,
        // token: 'd78b5ba25a4699a1cb567b7a933e630b', // amap
      },
      // geoArea: {
      //   url: 'https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.2/choropleth-data',
      //   type: 'topojson',
      // },
      source: {
        data: mdataSource.filter((ele) => ele[sourceField] && ele[valueField] !== 0 ),
        joinBy: {
          geoField: 'name',
          sourceField: sourceField || 'name',
        },
      },
      autoFit: true,
      color: {
        field: valueField || 'value',
        value: [
          '#820C1B',
          '#a31022',
          '#ac2738',
          '#b53f4e',
          '#be5764',
          '#c76f7a',
          '#d18790',
          '#da9fa6',
          '#e3b7bc',
          '#eccfd2',
          '#f5e7e8',
          '#fde7ea',

          // '#001D70',
          // '#0047A5',
          // '#1A4397',
          // '#2555B7',
          // '#3165D1',
          // '#3D76DD',
          // '#467BE8',
          // '#6296FE',
          // '#7EA6F9',
          // '#98B7F7',
          // '#BDD0F8',
          // '#DDE6F7',
          // '#F2F5FC'
        ].reverse(),
        scale: { type: 'quantile' },
      },
      viewLevel: {
        // level: 'country',
        // adcode: '100000',
        // granularity: 'province',
        level: 'world',
        adcode: 'all',
        granularity: 'country',
      },
      chinaBorder: false,
      style: {
        opacity: 1,
        stroke: '#fff',
        lineWidth: 0.6,
        lineOpacity: 1,
      },
      state: {
        active: {
          stroke: 'yellow',
          lineWidth: 0.6,
          // lineOpacity: 0.8,
        },
      },
      label: {
        visible: true,
        field: 'name',
        style: {
          fill: '#000',
          opacity: 0.8,
          fontSize: 10,
          stroke: '#fff',
          strokeWidth: 1.5,
          textAllowOverlap: false,
          padding: [8, 8],
        },
      },
      tooltip: {
        items: ['name', { field: valueField, alias: dataFieldAlias[valueField].alias, customValue: (v) => dataFieldAlias[valueField].formatter(v) }],
      },
      zoom: false,
      legend: false,
    };

  return <ChoroplethMap {...config} />;
});