单击时更改区域颜色(react-simple-maps)

npm install react-simple-maps

yarn add react-simple-maps

import { ComposableMap, Geographies, Geography } from "react-simple-maps";
import "react-simple-maps/styles.css";

<ComposableMap projection="geoAlbers" projectionConfig={{ scale: 100 }}>
  <Geographies geography={geoUrl}>
    {({ geographies }) =>
      geographies.map((geo) => (
        <Geography
          key={geo.rsmKey}
          geography={geo}
          onMouseEnter={onMouseEnterHandler}
          onMouseLeave={onMouseLeaveHandler}
          onClick={onClickHandler}
          style={{
            default: {
              fill: "#D6D6DA",
              outline: "none",
            },
            hover: {
              fill: "#F53",
              outline: "none",
            },
            pressed: {
              fill: "#E42",
              outline: "none",
            },
          }}
        />
      ))
    }
  </Geographies>
</ComposableMap>

const onClickHandler = (event) => {
  const { NAME } = event.target.properties;
  
  // 根据NAME获取对应的区域颜色
  const color = getColorByName(NAME);

  // 更新区域颜色状态
  setColorState((prevState) => {
    return {
      ...prevState,
      [NAME]: color,
    };
  });
};

const [colorState, setColorState] = useState({
  区域1: "#F00",
  区域2: "#0F0",
  区域3: "#00F",
});

// ...

<Geography
  key={geo.rsmKey}
  geography={geo}
  style={{
    default: {
      fill: colorState[geo.properties.NAME],
      outline: "none",
    },
    hover: {
      fill: "#F53",
      outline: "none",
    },
    pressed: {
      fill: "#E42",
      outline: "none",
    },
  }}
/>