如何在 OpenLayers 中获取绘制框的坐标？

Question

我是 OpenLayers 的新手，很抱歉有一个明显的（也许是愚蠢的）问题，我找到了不同的解决方案方法，但没有一个有效。尝试了这个和那个，十几个不同的建议（here、here、here、here、here）但都是徒劳的。

基本上，我想将绘制的矩形的坐标传递给另一个 Web 服务。因此，在绘制完矩形后，它应该会吐出边界框的四个角。

到目前为止，我所拥有的是用于绘制矩形的基本 OL 图层示例：

    var source = new ol.source.Vector({wrapX: false});


    vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(0, 255, 0, 0.5)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                color: '#ffcc33'
                })
            })
        })      
    });



    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            vector
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([37.41, 8.82]),
            zoom: 4
        })
    });



    var draw; // global so we can remove it later
    function addInteraction() 
    {
        var value = 'Box';

        if (value !== 'None') 
        {
            var geometryFunction, maxPoints;
            if (value === 'Square') 
            {
                value = 'Circle';
                geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
            } 
            else if (value === 'Box') 
            {
                value = 'LineString';
                maxPoints = 2;
                geometryFunction = function(coordinates, geometry)
                {
                    if (!geometry) 
                    {
                        geometry = new ol.geom.Polygon(null);
                    }
                    var start = coordinates[0];
                    var end = coordinates[1];
                    geometry.setCoordinates([
                    [start, [start[0], end[1]], end, [end[0], start[1]], start]
                    ]);
                    return geometry;
                };
            }

            draw = new ol.interaction.Draw({
                source: source,
                type: /** @type {ol.geom.GeometryType} */ (value),
                geometryFunction: geometryFunction,
                maxPoints: maxPoints            
            });

            map.addInteraction(draw);               
        }
    }


    addInteraction();           

现在，接下来会发生什么？有什么好的提取边界框的方法？

感谢任何提示！

Answer 1

您需要为绘图交互指定一个侦听器。像这样：

draw.on('drawend',function(e){
alert(e.feature.getGeometry().getExtent());
});

这是fiddle