openlayers点图元渲染及画圆

下面是openlayers点图元渲染效果图及在4326坐标系中画圆效果图。

因为功能需要所以写的可能有点麻烦，只截取了方法实现的代码。

 // 渲染点图标及画圆
  renderIcon(rows) {
  	let rows = {};
    rows.centerPoint = "116.64560693, 40.05946214";
    let self = this;
    self.vectorSource = new VectorSource(); // 图元数据源

    self.showCircle('文本内容', rows.centerPoint, 1500); //文本内容   中心点坐标  半径

    self.vectorLayer = new VectorLayer({
      source: self.vectorSource
    });
    self.map.addLayer(self.vectorLayer);  // 将矢量图层添加到地图图层中
  }

  // 点图元及覆盖面
  showCircle(name, center, radius) {
    let personnelImg = require("../assets/icons/pannel.png");  // 引用图片
    let centerPoint = this.transPoint(center);
    // 渲染点
    let personnelLocal = new Feature({
      geometry: new Point(centerPoint),
    });
    personnelLocal.setStyle(new Style({  // 设置样式
      image: new Icon({  // 图标
        src: personnelImg,
        // scale:0.3,  //图标大小
      }),
      text: new Text({
        text: name,  // 文本内容
        font:'bold 16px serif',  // 加粗 字体大小 字体样式
        // offsetX:12,
        offsetY: 15,  // y轴偏移
        fill: new Fill({  // 字体颜色
          color: '#FF6238'
        })
      })
    }));
    this.vectorSource.addFeature(personnelLocal);  // 添加点图元

    radius = parseFloat(radius);
    //这里是在4326坐标系上画圆，需要进行转换
    let circleIn3857 = new Circle(transform(centerPoint, 'EPSG:4326', 'EPSG:3857'), radius);
    let circleIn4326 = circleIn3857.transform('EPSG:3857', 'EPSG:4326');

    let circleFeature = new Feature({  //添加面
      geometry: circleIn4326,
    });
    circleFeature.setStyle(new Style({  // 设置样式
      fill: new Fill({
        color: 'rgba(211, 223, 235, 0.5)'
      }),
      stroke: new Stroke({
        color: '#1D70FF'
      })
    }));
    this.vectorSource.addFeature(circleFeature);  // 添加面图元
  }

  // 字符串经纬度转换为数组形式
  transPoint(point) {
    let item = point.split(',')
    item = [parseFloat(item[0]), parseFloat(item[1])]
    return item;
  }