antv-l7/stories/React/components/world_ncov_fill.tsx

import {
  LayerEvent,
  LineLayer,
  MapboxScene,
  AMapScene,
  Marker,
  PolygonLayer,
  Popup,
} from '@antv/l7-react';
import * as React from 'react';

function joinData(geodata: any, ncovData: any) {
  const ncovDataObj: any = {};
  ncovData.forEach((item: any) => {
    const {
      countryName,
      countryEnglishName,
      currentConfirmedCount,
      confirmedCount,
      suspectedCount,
      curedCount,
      deadCount,
    } = item;
    if (countryName === '中国') {
      if (!ncovDataObj[countryName]) {
        ncovDataObj[countryName] = {
          countryName: 0,
          countryEnglishName,
          currentConfirmedCount: 0,
          confirmedCount: 0,
          suspectedCount: 0,
          curedCount: 0,
          deadCount: 0,
        };
      } else {
        ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount;
        ncovDataObj[countryName].confirmedCount += confirmedCount;
        ncovDataObj[countryName].suspectedCount += suspectedCount;
        ncovDataObj[countryName].curedCount += curedCount;
        ncovDataObj[countryName].deadCount += deadCount;
      }
    } else {
      ncovDataObj[countryName] = {
        countryName,
        countryEnglishName,
        currentConfirmedCount,
        confirmedCount,
        suspectedCount,
        curedCount,
        deadCount,
      };
    }
  });
  const geoObj: any = {};
  geodata.features.forEach((feature: any) => {
    const { name } = feature.properties;
    geoObj[name] = feature.properties;
    const ncov = ncovDataObj[name] || {};
    feature.properties = {
      ...feature.properties,
      ...ncov,
    };
  });
  return geodata;
}

export default React.memo(function Map() {
  const [showScene, setShowScene] = React.useState(true);
  const [data, setData] = React.useState();
  const [popupInfo, setPopupInfo] = React.useState<{
    lnglat: number[];
    feature: any;
  }>();

  function showPopup(args: any): void {
    console.log(args.lngLat);
    setPopupInfo({
      lnglat: args.lngLat,
      feature: args.feature,
    });
  }
  React.useEffect(() => {
    const fetchData = async () => {
      const [geoData, ncovData] = await Promise.all([
        fetch(
          'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
        ).then((d) => d.json()),
        fetch(
          'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
        ).then((d) => d.json()),
      ]);
      setData(joinData(geoData, ncovData.results));
    };
    fetchData();
  }, []);

  setTimeout(() => {
    // setShowScene(false)
  }, 3000);

  return (
    <>
      {showScene && (
        <AMapScene
          map={{
            center: [110.19382669582967, 50.258134],
            pitch: 0,
            style: 'blank',
            zoom: 10,
          }}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
          }}
          onSceneLoaded={(scene) => {
            setTimeout(() => {
              // scene.removeAllLayer()
              // scene.destroy()
            }, 3000);
            // setTimeout(() => scene.destroy(), 5000)
          }}
        >
          {popupInfo && (
            <Popup lnglat={popupInfo.lnglat}>
              {popupInfo.feature.name}
              <ul
                style={{
                  margin: 0,
                }}
              >
                <li>
                  <button
                    onClick={() => {
                      alert('test');
                    }}
                    value="点击"
                  >
                    点击
                  </button>
                  现有确诊:{popupInfo.feature.currentConfirmedCount}
                </li>
                <li>累计确诊:{popupInfo.feature.confirmedCount}</li>
                <li>治愈:{popupInfo.feature.curedCount}</li>
                <li>死亡:{popupInfo.feature.deadCount}</li>
              </ul>
            </Popup>
          )}
          {data && [
            <PolygonLayer
              key={'1'}
              options={{
                autoFit: true,
                fitBoundsOptions: {
                  duration: 0,
                  animate: false,
                },
              }}
              source={{
                data,
              }}
              scale={{
                values: {
                  confirmedCount: {
                    type: 'quantile',
                  },
                },
              }}
              active={{
                option: {
                  color: '#0c2c84',
                },
              }}
              color={{
                field: 'confirmedCount',
                values: [
                  '#732200',
                  '#CC3D00',
                  '#FF6619',
                  '#FF9466',
                  '#FFC1A6',
                  '#FCE2D7',
                ].reverse(),
              }}
              shape={{
                values: 'fill',
              }}
              style={{
                opacity: 1,
              }}
            >
              <LayerEvent type="click" handler={showPopup} />
              {/* <LayerEvent type="mouseout" handler={hidePopup} /> */}
            </PolygonLayer>,
            ,
            <LineLayer
              key={'2'}
              source={{
                data,
              }}
              size={{
                values: 0.6,
              }}
              color={{
                values: '#aaa',
              }}
              shape={{
                values: 'line',
              }}
              style={{
                opacity: 1,
              }}
            />,
          ]}
        </AMapScene>
      )}
    </>
  );
});