如何绘制多个值的圆符号？

Question

目前，我有一个圆标牌，为不健康的例子创造红色的圆圈。

现在，在同一张世界地图上，我希望健康的实例也有绿色的圆圈。

举个例子，城市名称“凤凰”可以有20个不健康实例和3个健康实例。因此，在这种情况下，我想要一个圆形的红色代表不健康的例子，绿色的圆形代表健康的例子凤凰。

{
    CityMapData.map((city, index) => {
    const {
            unhealthyInstancesCount,
            healthyInstancesCount,
            entityName,
            totalInstancesCount,
            timeZoneData,
          } = city;

    return (
            <CircleMarker
            key={index}
            center={timeZoneData.coordinates}
            radius={10 * Math.log(unhealthyInstancesCount+ 1)}
            fillOpacity={0.5}
            stroke={false}
            color={COLORS.RED}
            >
           );
    })
}

Answer 1

只需根据条件选择颜色，并将unhealthyInstancesCount和healthyInstancesCount作为instancesCount传递给任何需要的组件。

const {
          instancesCount
          entityName,
          totalInstancesCount,
          timeZoneData,
          isHealthy
    } = city;

return (
    <CircleMarker
    key={index}
    center={timeZoneData.coordinates}
    radius={10 * Math.log(instancesCount+ 1)}
    fillOpacity={0.5}
    stroke={false}
    color={isHealthy ? COLORS.GREEN : COLORS.RED}
>