Cómo dibujar un rectángulo de ReactBounds usando OpenLayers

Question

Estoy buscando una solución en la que pueda dibujar el rectángulo con los reactbonds. He encontrado la solución, pero es una versión heredada del OL. Tengo enlaces de reacción como  ["-1535320.98225989", "6134670.12008471", "379695.245336351", "9059640.13281387"]y lo que estoy buscando es algo similar a esto:

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

Aquí está el código para lo siguiente:

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

EDITAR: Después de algunas búsquedas, encontré que puedo dibujar el rectángulo ol.interaction.Draw.createBox(). Pero todavía no hay suerte con reactBonds Aquí está el 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);

¿Alguna sugerencia?

Answer 1

El código equivalente en OpenLayers 3 y superior es

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