3

I am trying to add a buffer around some points shown on a map. I have tried to do something similar back in the days of OL2 and I remember it was not straight forward.

Is there a simple way to do this in OL3? I have found this:

ol.extent.buffer(extent, value, opt_extent)

but I am not able to find an example.

3

As long as you want to buffer points or extents, the function you mentioned should be enough. But If you want to buffer polygons or linestring JSTS topology suite would give you the solution. Now back to your question. Do something like the following:

//create the point feature you want to buffer
var pointFeature = new ol.Feature(
new ol.geom.Point([0,0])
);
//create a [point layer and a source and pass the fetaure to the source
var vectorPoint= new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [pointFeature]
  })
});
//create a polyon layer to hold your buffers
var vectorBuffers= new ol.layer.Vector({
  source: new ol.source.Vector({})
});
//initilise your map and add the layers
var map = new ol.Map({
 layers: [raster,vectorPoint,vectorBuffers],
  target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
 })
});

//and finally build a function to do the buffering
var radius= 1000000;
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);
}

here is a fiddle to make your life easier

  • Ααα. Βλέπω είσαι από Ελλάδα! :) Σε ευχαριστώ. Ενδιαφέρον blog παρεμπιπτόντως. – user1919 Nov 19 '15 at 13:06
  • No probs amigo. Glad to help you :)))))). Thanks for your honors – pavlos Nov 19 '15 at 13:11
  • Also I just realised that this is not a proper buffer. Should be a circle and not a rectangle. If you want a proper buffer just ask. I have an ace up my sleeve ..... – pavlos Nov 19 '15 at 13:37
  • Thanks. I saw that also but I found this: ol.geom.Polygon.circular(sphere, center, radius, opt_n) which will solve the issue! :) By the way check this out (a gis meetup I am trying to organize in Athens): meetup.com/Geo-Athens – user1919 Nov 19 '15 at 13:52
  • 1
    Correct this should solve the problem. Joined your meet up. – pavlos Nov 19 '15 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.