如何调整 Box 的大小，打开 Layers 3？

Question

我可以画方框，我也可以正确画move/drag方框。但是，如何调整框的大小？

我到底需要什么 :

OpenLayers 2 示例，

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

这是我的代码:

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

select 和 drag/move 框的代码：

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

详细说明我的评论：

您需要 update/change "box"（我想是多边形）的几何形状以使其显示 "resized"，在地图上显示某些内容的任何操作结束时使用范围告诉 OL 在哪里放置东西（本质上）。

我做了一个小例子来演示如何在特征的 Geometry 对象上使用 .scale 方法。

CodePen

解释：

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)

这是我在地图上绘制多边形时用于缩放绘制的多边形的代码。我总是将它缩放 0.9（这使它更小（基本比例因子））。

1 = 相同尺寸
0.* = 更小
1.* = 更大

您需要使用与上述类似的逻辑来调整多边形的大小。你需要特征对象，然后提取几何对象，并使用.scale方法。

scale(sx, yx)方法参数如下：

sx = x 方向的比例因子。
yx = y 方向的比例因子（默认为 sx）。

更多信息Geometry Class in the OL docs

如何调整 Box 的大小，打开 Layers 3？

How to resize Box , Open Layers 3?

javascript

openlayers

openlayers-3