React-leaflet Circle组件设置半径后显示异常求助

我之前也碰到过一模一样的情况，大概率是这几个原因导致的，咱们一个个排查：

1. 半径单位理解偏差（最常见） #

Leaflet的Circle组件里，radius属性的默认单位是米——你设置的radius={70}意味着这个圆的半径只有70米。如果你的地图缩放级别较低（比如显示的是整个国家甚至更大范围），这么小的地理范围在地图上自然会缩成一个几乎看不见的小点。

解决思路分两种：

• 如果需要固定像素大小的圆（不受地图缩放影响），直接换成CircleMarker组件，它的radius单位是像素：

  <CircleMarker center={[30, 70]} fillColor="blue" radius={10} />
  

• 如果确实需要基于地理距离的圆，就把radius调大，比如改成7000（对应7公里），再看显示效果：

  <Circle center={[30, 70]} fillColor="blue" radius={7000} />
  

2. 坐标顺序是否正确 #

Leaflet的坐标格式是**[纬度, 经度]**，你设置的[30,70]对应北纬30度、东经70度（大概在巴基斯坦附近）。如果你的地图默认显示区域不在这个位置，可能圆根本不在当前视野内，你看到的“小点”只是地图边缘的残留。可以先把地图视角定位到目标坐标验证：

<MapContainer center={[30, 70]} zoom={10} style={{ height: "100vh" }}>
  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
  <Circle center={[30, 70]} fillColor="blue" radius={7000} />
</MapContainer>

3. 样式属性被意外覆盖 #

检查有没有全局样式或其他组件样式影响了Circle的显示：

• 是不是不小心设置了fillOpacity={0}或strokeOpacity={0}？如果填充透明度为0，圆会彻底隐形，只剩可能的边框（边框也透明的话就完全看不见了）
• 有没有把color（边框颜色）设为透明？小半径下，只有填充色的圆也可能看起来像小点

可以显式设置这些属性排除问题：

<Circle 
  center={[30, 70]} 
  fillColor="blue" 
  fillOpacity={0.7}
  color="black"
  radius={7000} 
/>

4. 版本兼容性问题 #

如果你用的是React-Leaflet v4+，要确保Leaflet核心版本匹配（需要v1.9+），版本不兼容可能导致组件渲染异常。可以检查package.json里的依赖：

{
  "leaflet": "^1.9.4",
  "react-leaflet": "^4.2.1"
}

先从第一个原因排查，大概率是半径单位的问题——70米在低缩放级别下确实太小了！

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