http://gis.stackexchange.com/questions/170814/how-to-add-a-buffer-on-a-point-in-open-layers-3

by Pavlos Tsagkis

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.9.0/css/ol.css">
<script src="http://openlayers.org/en/v3.9.0/build/ol-debug.js"></script>
<div  id="map"></div>
<div>
 <button id="bufferit" >buffer it</button> 

</div>

JavaScript

var raster = new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'sat'})});
var pointFeature = new ol.Feature(
new ol.geom.Point([0,0])
);
var vectorPoint= new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [pointFeature]
  })
});

var vectorBuffers= new ol.layer.Vector({
  source: new ol.source.Vector({})
});

var map = new ol.Map({
 layers: [raster,vectorPoint,vectorBuffers],
  target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
 })
});



document.getElementById('bufferit').onclick = function (){
    var bufferRadius = 1000000;
    bufferit(bufferRadius)
};

function bufferit(radius){
var poitnExtent = pointFeature.getGeometry().getExtent();
var bufferedExtent = new ol.extent.buffer(poitnExtent,radius);
    console.log(bufferedExtent);
var bufferPolygon = new ol.geom.Polygon(
[
    [[bufferedExtent[0],bufferedExtent[1]],
    [bufferedExtent[0],bufferedExtent[3]],
    [bufferedExtent[2],bufferedExtent[3]],
    [bufferedExtent[2],bufferedExtent[1]],
    [bufferedExtent[0],bufferedExtent[1]]]
]
);
 console.log("bufferPolygon",bufferPolygon);
var bufferedFeature = new ol.Feature(bufferPolygon);
vectorBuffers.getSource().addFeature(bufferedFeature);
}