首页 / OpenLayers / API 文档

DragBox

先看结论

拖拽框选交互。按下并拖动时在地图上画一个矩形，松开后可以拿到矩形范围，用来做框选查询或局部放大。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-29 · 引用本文

new ol.interaction.DragBox(options)

构造参数

参数	默认	说明
`className`	'ol-dragbox'	拖动时矩形 DOM 的类名，用于自定义样式
`condition`	始终响应	`(mapBrowserEvent) => boolean`，返回 false 时不启动框选
`minArea`	64	矩形最小面积，像素平方；小于该值不触发结束事件

方法与事件

成员	说明
`getGeometry()`	返回当前框选的 `ol.geom.Polygon`，坐标已转换到地图投影
`event: 'boxstart'`	按下开始拖动时触发
`event: 'boxdrag'`	拖动过程中持续触发
`event: 'boxend'`	松开鼠标且面积达到阈值时触发，业务逻辑写在这里

示例：框选统计

var source = new ol.source.Vector({ features: facilities });

var dragBox = new ol.interaction.DragBox({
  className: 'ol-dragbox',
  condition: ol.events.condition.platformModifierKeyOnly
});

map.addInteraction(dragBox);

dragBox.on('boxend', function () {
  var extent = dragBox.getGeometry().getExtent();
  var hits = source.forEachFeatureIntersectingExtent(extent, function (feature) {
    feature.set('selected', true);
  });

  console.log('范围内要素数', hits.length);
  console.log('范围', extent);
});

与 Shift 键配合

地图上的拖动默认被 DragPan 占用，DragBox 也在监听同一套指针事件。用 condition 限定触发条件（例如按住 Shift 或 Ctrl），两者就能共存；不设条件时框选会抢占平移手势，地图无法拖动。

范围已投影

getGeometry() 返回的多边形坐标是视图投影下的平面坐标，直接交给服务端查询前，通常需要 ol.proj.transformExtent 转回经纬度，或者用 ol.format.WKT 写成 WKT 并声明坐标系。

框选面积过小会被丢弃。手抖产生的几像素矩形不会触发 boxend，这是为了避免误触。确实需要响应极小范围时，把 minArea 调小，而不是自己监听指针事件重写一套。

引用本文

经纬志（2026）。《DragBox》。https://www.jingweizhi.com/openlayers/api/drag-box.html（访问日期 2026-11-03）。