How to create buffer graphic layer in openlayers3 - openlayers-3

Question

Hello i am trying to create buffer for point in openlayers 3.I am able to display the with in buffer distance result.but not able to crea graphic layer. please help and what i tried i put it down.you can check it
var style = new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
width: 5,
color: 'blue'
}),
radius: 12
}),
text: new ol.style.Text({
font: '12px helvetica,sans-serif',
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
for (var i = 0; i < myObject.length; i++) {
ObjectIDs.push(myObject[i].asset_type);
ObjectIDs.push(myObject[i].x);
ObjectIDs.push(myObject[i].y);
}
var gridquerystr = ObjectIDs[0].toString();
var x = ObjectIDs[1].toString();
var y = ObjectIDs[2].toString();
alert(gridquerystr);
alert(x);
alert(y);
var pointgeom;
var pointfeatures = [];
//for (var i = 0 ; i < myObject.length ; i++) {
pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857"));
pointfeature = new ol.Feature({
geometry: pointgeom
});
pointfeature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: bufferdistance,
width: 5
}),
fill: new ol.style.Fill({
color: [51, 51, 51, .3]
})
}));
pointfeatures.push(pointfeature);
pointfeature.setStyle(style);
var locations = new ol.source.Vector({
features: pointfeatures,
project: "EPSG:4326"
});
SearchResultsLayer.setSource(locations);

Answer 1

since you can retrieve the features that are within the buffer you created and only need to display it ( if I understood well what you wanted ), you only have to change the style of your point like this:
Feature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: yourBufferDistance,
width: 2
}),
fill: new ol.style.Fill({
color: [51, 51, 51, .3]
})
})
}));

Answer 2

I am getting buffer for the selected feature .But i want add own styles for the feature.Is there any other way.My working buffer function is
var pointgeom;
var pointfeatures = [];
pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857"));
pointfeature = new ol.Feature({
geometry: pointgeom
});
var poitnExtent = pointfeature.getGeometry().getExtent();
var bufferedExtent = new ol.extent.buffer(poitnExtent, bufferdistance);
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]]]
]
);
var bufferedFeature = new ol.Feature(bufferPolygon);
vectorBuffers.getSource().addFeature(bufferedFeature);

Answer 3

My working buffer for point is
var pointfeatures = [];
var ObjectIDs = [];
var obj = JSON.parse(data.d);
for (var i = 0 ; i < obj.length ; i++) {
ObjectIDs.push(obj[i].x);
ObjectIDs.push(obj[i].y);
var x = ObjectIDs[0].toString();
var y = ObjectIDs[1].toString();
pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857"));
pointfeature = new ol.Feature({
geometry: pointgeom
});
var extent = pointfeature.getGeometry().getExtent();
var bufferextent = new ol.extent.buffer(extent, bufferdistance);
var bufferPolygon = new ol.geom.Circle(extent, bufferdistance);
var bufferedFeature = new ol.Feature(bufferPolygon);
pointfeatures.push(bufferedFeature);
pointfeature.setStyle(style);
bufferedFeature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
image: new ol.style.Circle({
radius: bufferdistance,
width: 2
})
})
);
vectorBuffers.getSource().addFeature(bufferedFeature);
}
locations = new ol.source.Vector({
features: bufferextent,
project: "EPSG:4326"
});
SearchResultsLayer.setSource(locations);
map.getView().fit(SearchResultsLayer.getSource().getExtent(), map.getSize());