OpenLayersでより複雑なグラフィカルオブジェクトを描画するにはどうすればよいですか？

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var source = new ol.source.Vector();

  var white = [255, 255, 255, 1];
  var blue = [0, 153, 255, 1];
  var width = 3;
  var pointStyle = new ol.style.Style({
    image: new ol.style.Circle({
      radius: width * 2,
      fill: new ol.style.Fill({
        color: blue
      }),
      stroke: new ol.style.Stroke({
        color: white,
        width: width / 2
      })
    }),
    zIndex: Infinity
  });

  var lineStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'black',
      width: 2
    }),
    text: new ol.style.Text({
      font: '12px Calibri,sans-serif',
      overflow: true,
      placement: 'line',
      textBaseline: 'bottom',
      fill: new ol.style.Fill({
        color: 'black'
      }),
      stroke: new ol.style.Stroke({
        color: '#fff',
        width: 3
      })
    })
  });

  var startStyle = lineStyle.clone();
  var endStyle = lineStyle.clone();

  var styleFunction = function(feature, resolution) {
    var styles = [pointStyle];
    var geometry = feature.getGeometry();
    if (geometry.getType() == 'LineString') {
        lineStyle.getText().setText((feature.getGeometry().getLength()/1000).toFixed());
        styles.push(lineStyle);
        var pixels = 10;
        var start = geometry.getFirstCoordinate();
        startStyle.setGeometry(new ol.geom.LineString([[start[0], start[1] - pixels*resolution], [start[0], start[1] + pixels*resolution]]));
        styles.push(startStyle);
        var end = geometry.getLastCoordinate();
        endStyle.setGeometry(new ol.geom.LineString([[end[0], end[1] - pixels*resolution], [end[0], end[1] + pixels*resolution]]));
        styles.push(endStyle);
    }
    return styles;
  };
  var vector = new ol.layer.Vector({
    source: source,
    style: styleFunction
  });

  var map = new ol.Map({
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
      center: [-11000000, 4600000],
      zoom: 4
    })
  });

  map.addInteraction(new ol.interaction.Draw({
    source: source,
    type: 'LineString',
    style: styleFunction 
  }));

html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>