How to resize Box , Open Layers 3?

Question

I am able to draw box and I can also move/drag box correctly. But, how can I resize the box?

what exactly i need :

OpenLayers 2 Example,

https://harrywood.co.uk/maps/examples/openlayers/bbox-selector.view.html

Here is my code:

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var source = new ol.source.Vector({wrapX: false});

  var vector = new ol.layer.Vector({
    source: source
  });

  var map = new ol.Map({
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
      center: [-11000000, 4600000],
      zoom: 4
    })
  });


var geometryFunction = ol.interaction.Draw.createBox();
box = new ol.interaction.Draw({
  source: source,
  type: 'Circle',
  geometryFunction: geometryFunction
});

box.on('drawend', function (e) {
  var bounds = e.feature.getGeometry().getExtent();
  console.log(bounds);
});

map.addInteraction(box);

Code for select and drag/move box:

var select = new ol.interaction.Select();

var translate = new ol.interaction.Translate({
  features: select.getFeatures()
});

translate.on('translateend', function (e) {
  var bounds = e.features.getArray()[0].getGeometry().getExtent()
  console.log(bounds);
});

map.addInteraction(select);
map.addInteraction(translate);

Answer 1

Elaboration to my comment:

You need to update/change the geometry of the "box" (polygon I suppose) to make it appear "resized", at the end of any operation that shows something on the map it uses extents that tell OL where to place things (essentially).

I have made a little example demonstrating how to use the .scale method on the Geometry object of a feature.

CodePen

Explanation:

draw.on("drawend", function(e){
  var iterations = 0;
  var interval = setInterval(function(){
    if(iterations == 10){
      clearInterval(interval);
    }
    iterations++;

    var feature = e.feature;

    var coords = feature.getGeometry();

    coords.scale(0.9, 0.9);

  }, 300)

This is the code I use to scale the drawn polygon when the polygon has been drawn on the map. I always scale it by 0.9 (that makes it smaller (Basic scale factoring)).

• 1 = The same size
• 0.* = Smaller
• 1.* = Bigger

You need to use similar logic to this above to resize your polygons. You need feature object, then extract the Geometry object, and use the .scale method.

The scale(sx, yx) method arguments are as follows:

• sx = The scaling factor in the x-direction.
• yx = The scaling factor in the y-direction (defaults to sx).

For more info Geometry Class in the OL docs