openlayers绘制圆的半径线条

之前不晓得咋算圆的面积，就是圆的一个点，无意中看见一个大佬的文章，顿时有了思路添加链接描述
效果图

代码

// 转换成屏幕像素
function pmxs(radius) {
  let metersPerUnit = map.getView().getProjection().getMetersPerUnit();
  let circleRadius = radius / metersPerUnit;
 // console.log(circleRadius, metersPerUnit, "转换成屏幕像素");
  return circleRadius;
}
//添加图层
const addLayer = () => {
let  vectorLayer = new VectorLayer({
    source: new VectorSource(),
  });
  let colordd =
    new Circle(
      [125.3587389704, 43.887798338],
      pmxs(3000)
    )
  let colorArray = ['red', 'orange', 'yellow', 'blue']
  vectorLayer.getSource().addFeatures(
    drawCircle([125.3587389704, 43.887798338], pmxs(3000), circleCallback, colorArray[0], (3000 / 1000) + 'km'),

  );
  function circleCallback(feature, index, color) {
    feature.setStyle(setCircleStyle(colorArray[0]))
  }
  map.addLayer(vectorLayer);
  map.getView().setCenter([125.3579180563, 43.888298024]);

};
//由于我就需要渲染一个圆，就没有必要循环了
/**
     * 根据经纬度坐标画圆 注意  注意该函数 不可轻易复用！问题多多。。
     * @param {*} centerPosition 中心点经纬度坐标 
     * @param {*} radius 半径 单位为米 可以为空，默认值为2000
     * @param {*} callback 自定义设置 比如style 比如 设置属性 等等
     * @param {*} color 线条颜色
     * @param {*} text 提示文字
     * @return {*} features
     */
function drawCircle(centerPosition, radius = 2000, callback, color = '#000', text = '') {
  let features = []
  // for (let i = 0; i < centerPosition.length; i++) {
  //     let EPSGTransCoord = fromLonLat(centerPosition[i])
  let circle = new Circle(centerPosition, radius)
  let feature = new Feature({
    geometry: fromCircle(circle),
  })
  let coord = feature.getGeometry().getLinearRings()[0].getCoordinates()[0]
  let featureText = new Feature({
    geometry: new Point(coord)
  })
  featureText.setStyle(new Style({
    text: new Text({
      font: '14px Microsoft YaHei',
      text: text,
      textAlign: "right", //对齐方式
      textBaseline: "middle", //文本基线
      fill: new Fill({
        color: color
      }),
      offsetY: -5
    })
  }))
  let featureLine = new Feature({
    geometry: new LineString([
      centerPosition,
      coord,
    ]),
  })
  if (callback !== undefined && typeof callback === 'function') {
    callback(feature, color)
  }
  features.push(feature, featureText, featureLine)
  // }
  return features;
};

function setCircleStyle(color) {
  // 创建一个渐变填充样式
  return new Style({
    renderer(coordinates, state) {
      const pointsX = coordinates[0].map((obj) => obj[0]);
      const pointsY = coordinates[0].map((obj) => obj[1]);
      const startPoint = [Math.min(...pointsX), Math.min(...pointsY)];
      const endPoint = [Math.max(...pointsX), Math.max(...pointsY)];
      const ctx = state.context;
      const radius = Math.sqrt(startPoint[0] * startPoint[0] + endPoint[1] * endPoint[1]);
      console.log(pointsX, pointsY, startPoint, endPoint, ctx, 'radius');
    
      const grad = ctx.createLinearGradient(startPoint[0], startPoint[1], startPoint[0], endPoint[1]);
      grad.addColorStop(0, 'rgba(247, 241 ,154,0.55)');
      // grad.addColorStop(0.3, 'transparent');
      grad.addColorStop(0.5, 'rgba(247, 241 ,154,0.04)');
      grad.addColorStop(0.8, 'rgba(247, 241 ,154,0.12)');
      grad.addColorStop(1, 'rgba(247, 241 ,154,0.55)');
      ctx.beginPath();
      ctx.fillStyle = grad;
      ctx.moveTo(coordinates[0][0][0], coordinates[0][0][1]);
      for (let i = 0; i < coordinates[0].length; i++) {
        ctx.lineTo(coordinates[0][i][0], coordinates[0][i][1]);
      }
      ctx.fill();
    },
    // stroke: new Stroke({
    //     color,
    //     width: 1,
    //     lineDash: [10]
    // }),
  })
}

核心代码就上面那些，我这边用暂时还没什么问题