React Leaflet Circle组件radius属性含义及单位转换咨询

我正在使用react-leaflet实现世界地图并展示点位，数据源为包含accuracy_level、lat、long、name字段的JSON。通过react-leaflet的Circle组件在经纬度坐标处绘制圆形标记，该圆形会随地图缩放改变大小。

我的疑问是：Circle组件的radius属性数值对应的是什么单位？我推测是地图像素，但比如当accuracy_level为10公里时，如何确定对应的数值？

当前代码：

<MapContainer center={location} zoom={13} scrollWheelZoom={true}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>

        {data.map(x => (
           <Circle 
              center={[x.lat, x.long]} 
              pathOptions={{color: 'red'}} 
              radius={x.accuracy_level == "HIGH" ?  100 :  x.accuracy_level == "MEDIUM" ? 500 : 1000}>
        </Circle>
        ))}

      </MapContainer>

• radius的单位：react-leaflet的Circle组件radius属性的单位是米，而非像素。设置的数值直接对应真实地理距离，圆形会随地图缩放自动调整显示尺寸，始终保持设定的地理范围。

• 公里转radius数值：如果accuracy_level对应10公里，直接将radius设为10 * 1000 = 10000即可，无需换算像素。

• 优化代码示例：若要将不同accuracy_level映射到对应公里数（比如HIGH=1公里、MEDIUM=5公里、LOW=10公里），可修改代码如下：

{data.map(x => {
  let radius;
  switch(x.accuracy_level) {
    case "HIGH":
      radius = 1000; // 1公里 = 1000米
      break;
    case "MEDIUM":
      radius = 5000; // 5公里 = 5000米
      break;
    default:
      radius = 10000; // 10公里 = 10000米
  }
  return (
    <Circle 
      center={[x.lat, x.long]} 
      pathOptions={{color: 'red'}} 
      radius={radius}
    />
  );
})}

这样设置后，圆形会准确反映设定的地理范围，无论地图缩放级别如何变化，显示的大小都对应真实距离。

内容的提问来源于stack exchange，提问作者colla