import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { AreaMap } from '@ant-design/maps';
const DemoAreaMap = () => {
  const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
  useEffect(() => {
    asyncFetch();
  }, []);
  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
  const config = {
    map: {
      type: 'mapbox',
      style: 'blank',
      center: [120.19382669582967, 30.258134],
      zoom: 3,
      pitch: 0,
    },
    source: {
      data: data,
      parser: {
        type: 'geojson',
      },
    },
    autoFit: true,
    color: {
      field: 'density',
      value: ['#fee5d9', '#fcae91', '#fb6a4a', '#de2d26', '#a50f15'],
      scale: {
        type: 'quantile',
      },
    },
    style: {
      opacity: 1,
      stroke: '#fff',
      lineWidth: 0.6,
      lineOpacity: 1,
    },
    state: {
      active: true,
    },
    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', 'density'],
      customContent (title, items) {
         const titleDom = `<div style={{color: 'red',fontSize:'20px'}}>${items[0]?.value}</div>`;
        console.log(titleDom)
        return `<div style="color:'ted'">${titleDom}<div style={{color: 'red',fontSize:'20px'}}>${123123123}</div></div>`;
      }
    },
    zoom: {
      position: 'bottomright',
    },
    legend: {
      position: 'bottomleft',
    },
  };
  return <AreaMap {...config} />;
};
ReactDOM.render(<DemoAreaMap />, document.getElementById('container'));

customContent (title, items) {
const titleDom = `<div style="color: red; font-size: 20px;">${items[0]?.value}</div>`;
console.log(titleDom)
return `<div style="color: red;">${titleDom}<div style="color: red; font-size: 20px;">123123123</div></div>`;
}

回答