如何在Openlayers 6中自动调整形状的字体大小？

// 创建一个样式函数
var styleFunction = function(feature) {
  var fontSize = 12; // 初始字体大小
  var geometry = feature.getGeometry();
  var extent = geometry.getExtent();
  var width = extent[2] - extent[0]; // 计算要素的宽度

  // 根据要素的宽度调整字体大小
  if (width < 100) {
    fontSize = 12;
  } else if (width < 200) {
    fontSize = 16;
  } else {
    fontSize = 20;
  }

  // 创建样式对象
  var style = new ol.style.Style({
    text: new ol.style.Text({
      text: feature.get('name'), // 要素的名称属性
      font: fontSize + 'px Arial', // 设置字体大小和字体类型
      fill: new ol.style.Fill({
        color: '#000000' // 字体颜色
      })
    })
  });

  return style;
};

// 创建一个矢量图层
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data.geojson', // 数据源文件
    format: new ol.format.GeoJSON()
  }),
  style: styleFunction // 设置样式函数
});

// 创建地图对象
var map = new ol.Map({
  target: 'map',
  layers: [vectorLayer],
  view: new ol.View({
    center: [0, 0],
    zoom: 10
  })
});