Cómo agregar un buffer en un punto en OpenLayers 3

Question

Estoy tratando de añadir un margen alrededor de algunos puntos mostrados en un mapa. He intentado hacer algo similar en la época de OL2 y recuerdo que no era sencillo.

¿Existe una forma sencilla de hacer esto en OL3? He encontrado esto:

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

pero no logro encontrar un ejemplo.

Answer 1

Mientras desees amortiguar puntos o extensiones, la función que mencionaste debería ser suficiente. Pero si deseas amortiguar polígonos o líneas JSTS topology suite te daría la solución. Ahora volviendo a tu pregunta. Haz algo como lo siguiente:

//crear la entidad de punto que deseas amortiguar
var puntoEntidad = new ol.Feature(
new ol.geom.Point([0,0])
);
//crear una capa de puntos y una fuente y pasar la entidad a la fuente
var vectorPunto= new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [puntoEntidad]
  })
});
//crear una capa de polígonos para contener tus buffers
var vectorBuffers= new ol.layer.Vector({
  source: new ol.source.Vector({})
});
//inicializar tu mapa y añadir las capas
var mapa = new ol.Map({
 layers: [raster,vectorPunto,vectorBuffers],
  target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
 })
});

//y finalmente construir una función para hacer el amortiguamiento
var radio= 1000000;
function bufferit(radio){
var poitnExtent = puntoEntidad.getGeometry().getExtent();
var bufferedExtent = new ol.extent.buffer(poitnExtent,radio);
    console.log(bufferedExtent);
var bufferPoligono = 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",bufferPoligono);
var entidadBuffered = new ol.Feature(bufferPoligono);
vectorBuffers.getSource().addFeature(entidadBuffered);
}

aquí tienes un fiddle para facilitarte la vida