Comment dessiner un rectangle à partir des ReactBounds à l'aide d'OpenLayers

Question

Je cherche une solution où je peux dessiner le rectangle avec les reactbonds J'ai trouvé la solution mais c'est une version héritée de l'OL. J'ai des liens de réaction au fur  ["-1535320.98225989", "6134670.12008471", "379695.245336351", "9059640.13281387"]et à mesure que je recherche quelque chose de similaire à ceci:

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

Voici le code pour ce qui suit:

 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: Après quelques recherches, j'ai trouvé que je peux dessiner le rectangle à partir de ol.interaction.Draw.createBox(). Mais toujours pas de chance avec le reactBonds Voici le code complet:

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

Aucune suggestion?

Answer 1

Le code équivalent dans OpenLayers 3 et supérieur est

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