So zeichnen Sie mit OpenLayers Rechtecke aus den ReactBounds

Question

Ich suche nach einer Lösung, bei der ich das Rechteck mit den Reactbonds zeichnen kann. Ich habe die Lösung gefunden, aber es ist eine Legacy-Version des OL. Ich habe Bindungen reagiert  ["-1535320.98225989", "6134670.12008471", "379695.245336351", "9059640.13281387"]und was ich nach etwas Ähnlichem suche:

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

Hier ist der Code für Folgendes:

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

BEARBEITEN: Nach einiger Suche, die ich gefunden habe, kann ich das Rechteck aus zeichnen ol.interaction.Draw.createBox(). Aber immer noch kein Glück mit den reactBonds Hier ist der vollständige Code:

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

Irgendwelche Vorschläge?

Answer 1

Der entsprechende Code in OpenLayers 3 und höher lautet

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