Vjylku

I have some line layers ,I wan't to create 0.5km and 1km buffer around the lines.

How to create the the buffer in OpenLayers 3 and which layer use like wms,wps or wfs?

You can use the JSTS library to do the buffer, which can then be converted to OpenLayers. This is demonstrated in the buffer example among those featured by OpenLayers.

Here's a snippet:

// feature is an instance of ol.Feature

var feature;



// convert the OpenLayers geometry to a JSTS geometry

var jstsGeom = parser.read(feature.getGeometry());



// create a buffer of 40 meters around each line

var buffered = jstsGeom.buffer(40);



// convert back from JSTS and replace the geometry on the feature

feature.setGeometry(parser.write(buffered));

I also was interested in creating buffers around features but discovered the inaccuracies of the spherical mercator projection. Using JSTS it's possible to add buffers which are reasonably accurate (distance-wise) if you convert the first (or only) coordinate of the feature to a projection for your region. In my example I use North Carolina State Plane EPSG:32119. Then, I add the length of the buffer (in meters) to one dimension to form another point, the buffer length distance away. These two points form a line, the length of which is converted to a spherical mercator distance which is then used as the buffer distance in the JSTS code.

The routine is incorporated in my drag-and-drop code and applies to GeoJSON files only.

ol.proj.proj4.register(proj4);
var sp_projection = ol.proj.get('EPSG:32119');
var vectorSource = new ol.source.Vector();
var ddvector = new ol.layer.Vector({
opacity: 1.0,
visible: 0,
source: vectorSource,
style: styleFunction
});

var dragAndDropInteraction = new ol.interaction.DragAndDrop({
formatConstructors: [ ol.format.GPX, ol.format.GeoJSON, ol.format.IGC, ol.format.KML, ol.format.TopoJSON ]
});


var map = new ol.Map({
interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
...
});


dragAndDropInteraction.on('addfeatures', function(event) {
ddvector.setVisible(true);
vectorSource.addFeatures(event.features, event.projection);
if(event.file.name.endsWith(".geojson") == true && document.getElementById('buff').value > '') {
var bufferSource = new ol.source.Vector();
var parser = new jsts.io.OL3Parser();
for (var i = 0; i < event.features.length; i++) {
var feature = event.features[i];
var jstsGeom = parser.read(feature.getGeometry());
if(feature.getGeometry().getType() == 'Point') { var pttype = feature.getGeometry().getCoordinates(); } else { var pttype = feature.getGeometry().getFirstCoordinate(); }
var point_sp = ol.proj.transform(pttype, 'EPSG:3857', sp_projection);
var point_buff_sp = [point_sp[0], point_sp[1] + parseFloat(document.getElementById('buff').value)]; /* html element 'buff' holds length value */
var buffy = ( new ol.geom.LineString([ ol.proj.transform([ point_sp[0], point_sp[1] ], sp_projection, 'EPSG:3857'), ol.proj.transform([ point_buff_sp[0], point_buff_sp[1] ], sp_projection, 'EPSG:3857') ], 'XY') ).getLength(); /* converts line 'buff' state plane meters long to a spherical mercator line and calculates length (buffy)*/
var buffered = jstsGeom.buffer(buffy);
feature.setGeometry(parser.write(buffered));
}
}
map.getView().fit( vectorSource.getExtent(), (map.getSize()) );
});