Como desenhar retângulo a partir do ReactBounds usando OpenLayers

Question

Estou procurando uma solução onde posso desenhar o retângulo com os reactbonds. Encontrei a solução um, mas é uma versão legada do OL. Eu reajo ligações como  ["-1535320.98225989", "6134670.12008471", "379695.245336351", "9059640.13281387"]e o que estou procurando por algo semelhante a este:

http://dev.openlayers.org/examples/boxes.html

Aqui está o código para o seguinte:

 var box_extents = [
                [-10, 50, 5, 60],
                [-75, 41, -71, 44],
                [-122.6, 37.6, -122.3, 37.9],
                [10, 10, 20, 20]
            ];
            var map;
            function init(){
                map = new OpenLayers.Map('map');

                var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} );

                var boxes  = new OpenLayers.Layer.Boxes( "Boxes" );
    
                for (var i = 0; i < box_extents.length; i++) {
                    ext = box_extents[i];
                    bounds = OpenLayers.Bounds.fromArray(ext);
                    box = new OpenLayers.Marker.Box(bounds);
                    box.events.register("click", box, function (e) {
                        this.setBorder("yellow");
                    });
                    boxes.addMarker(box);
                }

                map.addLayers([ol_wms, boxes]);
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.zoomToMaxExtent();
            }

EDIT: Depois de alguma pesquisa, descobri que posso desenhar o retângulo de ol.interaction.Draw.createBox(). Mas ainda sem sorte com o reactBonds Aqui está o código completo:

rectangle = new ol.interaction.Draw({
                    source: new ol.source.Vector({wrapX: false}),
                    type: "box",
                    geometryFunction: ol.interaction.Draw.createBox(),
                });
                map.addInteraction(rectangle);

Alguma sugestão?

Answer 1

O código equivalente no OpenLayers 3 e acima é

            var boxes  = new ol.layer.Vector({
              source: new ol.source.Vector(),
              style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                  width: 2,
                  color: 'red'
                })
            });

            for (var i = 0; i < box_extents.length; i++) {
                ext = box_extents[i];
                box = new ol.Feature({
                  geometry: ol.geom.Polygon.fromExtent(ext)
                });
                boxes.getSource().addFeature(box);
            }