如何在openlayers中绘制圆形时显示渐变样式的动态文本？

var circleStyle = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 0, 0, 0.5)', // 设置填充颜色为半透明红色
  }),
});

var textStyle = new ol.style.Style({
  text: new ol.style.Text({
    text: '动态文本', // 设置文本内容
    fill: new ol.style.Fill({
      color: 'black', // 设置文本颜色为黑色
    }),
  }),
});

var circleFeature = new ol.Feature(new ol.geom.Circle([0, 0], 10000)); // 创建一个圆形要素
circleFeature.setStyle(circleStyle); // 设置圆形要素的样式

var textFeature = new ol.Feature(new ol.geom.Point([0, 0])); // 创建一个文本要素
textFeature.setStyle(textStyle); // 设置文本要素的样式

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [circleFeature, textFeature], // 将圆形要素和文本要素添加到矢量图层中
  }),
});

var map = new ol.Map({
  layers: [vectorLayer], // 将矢量图层添加到地图中
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 10,
  }),
});