Cluster&Lines

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol-debug.js"></script>
<div id="map" style="width:800px;height:800px"></div>

JavaScript

var geoLon1 = 10.7050100;
var geoLat1 = 48.43906662;
var geoLonLat = [geoLon1, geoLat1];
var geoWebMercator = ol.proj.fromLonLat(geoLonLat);

var geoLon2 = 10.89351837;
var geoLat2 = 48.29095294;
var geoLonLat2 = [geoLon2, geoLat2];
var geoWebMercator2 = ol.proj.fromLonLat(geoLonLat2);

var vectorLine = new ol.source.Vector({});
var vectorDevices = new ol.source.Vector({});

var circleup = new ol.style.Style({
  image: new ol.style.Circle({
    radius: 5,
    fill: new ol.style.Fill({
      color: 'rgba(0,255,0,0.7)',
      weight: 4
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(0,255,0,0.7)',
      width: 3
    })
  })
});

var feature = new ol.Feature(
  new ol.geom.Point(geoWebMercator)
);

var feature2 = new ol.Feature(
  new ol.geom.Point(geoWebMercator2)
);

var points = [geoWebMercator, geoWebMercator2];
var featureLine = new ol.Feature({
  name: "neu",
  geometry: new ol.geom.LineString(points)
});
vectorLine.addFeature(featureLine);

vectorDevices.addFeature(feature);
vectorDevices.addFeature(feature2);

var clusterSource = new ol.source.Cluster({
  distance: 20,
  source: vectorDevices
});

var vectorLinesLayer = new ol.layer.Vector({
  source: vectorLine,
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(0,255,0,0.7)',
      weight: 4
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(0,255,0,0.7)',
      width: 4
    })
  }),
});

var vectorDevicesLayer = new ol.layer.Vector({
  source: clusterSource,
  style: circleup

});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    projection: 'EPSG:3857',
    center: geoWebMercator,
    zoom: 10
  })
});

map.addLayer(vectorDevicesLayer);
map.addLayer(vectorLinesLayer);