如何调整盒子的大小，打开第 3 层?

Question

我可以画框，也可以正确移动/拖动框。 但是，如何调整框的大小？

我到底需要什么：

开放层 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 放置东西的位置(本质上(。

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

代码笔

解释：

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(。

有关更多信息，OL 文档中的几何类