Question

我可以绘制框，我也可以正确移动/拖动框。但是，我怎样才能调整盒子的大小？

我到底需要什么：

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

选择和拖动/移动框的代码：

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

阐述我的评论：

您需要更新/更改“框”（我想要的多边形）的几何图形以使其显示为“已调整大小”，在任何在地图上显示某些内容的操作结束时，它会使用范围告诉OL在哪里放置事物（基本上）。

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

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. * =更大

您需要使用与上面类似的逻辑来调整多边形的大小。您需要要素对象，然后提取Geometry对象，并使用.scale方法。

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

sx = x方向的缩放系数。
yx = y方向的缩放系数（默认为sx）。

了解更多信息Geometry Class in the OL docs

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

1 个答案: