如何在OpenLayers 3中调整绘制的Box大小？

我懂你现在的状态——已经搞定了矩形绘制和拖动移动，就差调整大小这最后一步啦！其实咱们只需要借助OpenLayers自带的ol.interaction.Modify交互就能轻松实现，它专门用来修改矢量要素的形状，刚好能满足矩形大小调整的需求。

下面是整合了绘制、拖动、调整大小所有功能的完整代码，我给你标注了关键部分：

// 加载底图图层
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(); 
var boxDraw = new ol.interaction.Draw({ 
  source: source, 
  type: 'Circle', 
  geometryFunction: geometryFunction 
}); 

// 绘制完成后输出矩形范围
boxDraw.on('drawend', function (e) { 
  var bounds = e.feature.getGeometry().getExtent(); 
  console.log('绘制完成，当前范围：', bounds); 
}); 
map.addInteraction(boxDraw); 

// 要素选择交互
var select = new ol.interaction.Select(); 
map.addInteraction(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(translate); 

// 新增：矩形大小调整交互
var modify = new ol.interaction.Modify({
  features: select.getFeatures(),
  // 可选配置：如果只想让用户拖拽四个角调整大小，可以自定义控制点样式
  // 不配置的话默认会显示所有顶点和边中点的控制点，操作更灵活
});

// 调整大小完成后输出新范围
modify.on('modifyend', function(e) {
  var modifiedFeature = e.features.getArray()[0];
  var newBounds = modifiedFeature.getGeometry().getExtent();
  console.log('调整大小完成，新范围：', newBounds);
});

map.addInteraction(modify);

核心逻辑说明： #

• ol.interaction.Modify需要和Select交互配合，通过features: select.getFeatures()指定只修改选中的矩形，这样用户选中绘制好的矩形后，就能看到蓝色的控制点，拖拽这些点就能自由调整矩形大小。
• modifyend事件和你之前用的drawend、translateend逻辑一致，用来获取调整后的矩形范围，方便后续业务处理。
• 如果想自定义控制点的样式（比如修改颜色、大小），可以给Modify交互添加style配置项，默认样式已经足够直观好用。

这样操作下来，你的矩形就完全支持绘制、拖动移动、调整大小三个核心功能啦，和你参考的示例效果一致~

内容的提问来源于stack exchange，提问作者Muhammad Zahid