如何在openlayers3中创建缓冲图形层

Question

您好，我正在尝试为 openlayers 中的点创建缓冲区 3.I 能够显示缓冲区距离 result.but 无法创建图形层。请帮忙，我试过的 down.you 可以检查一下 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

由于您可以检索您创建的缓冲区中的功能并且只需要显示它（如果我理解您想要的），您只需像这样更改您的点的样式：

 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

我正在为所选功能获取缓冲区。但是我想为 feature.Is 添加自己的样式，其他 way.My 工作缓冲区功能是

            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());

如何在openlayers3中创建缓冲图形层

How to create buffer graphic layer in openlayers3

openlayers-3