OpenLayers kullanarak ReactBounds'dan dikdörtgen çizme

Question

Çözümü bulduğum reactbond'larla dikdörtgeni çizebileceğim bir çözüm arıyorum, ancak bu, OL'nin eski bir versiyonu. Tahvillere tepki verdim  ["-1535320.98225989", "6134670.12008471", "379695.245336351", "9059640.13281387"]ve buna benzer bir şey aradım:

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

İşte aşağıdakiler için kod:

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

DÜZENLEME: Bazı aramalardan sonra dikdörtgeni çizebileceğimi buldum ol.interaction.Draw.createBox(). Ama reactBonds ile hala şans yok İşte tam kod:

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

Herhangi bir öneri?

Answer 1

OpenLayers 3 ve üstündeki eşdeğer kod

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