首页 / OpenLayers / API 文档

Select

先看结论

选择交互。单击或框选命中要素，把选中的要素放进一个集合，并用独立样式高亮。

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

new ol.interaction.Select(options)

构造参数

参数	说明
`condition`	判定是否触发选择的事件条件
`addCondition`	追加选中时的事件条件
`removeCondition`	取消选中时的事件条件
`toggleCondition`	切换选中状态的事件条件
`layers`	参与选择的图层，数组或返回布尔值的函数，默认全部图层
`filter`	进一步过滤要素的函数，签名 `(feature, layer)`
`style`	选中要素的高亮样式，省略时沿用图层样式
`hitTolerance`	命中容差像素，默认 0
`multi`	是否允许多选，默认 false
`features`	选中结果集合，可外部传入以便共享
`wrapX`	是否横向循环，默认 false

常用方法

方法	返回	说明
`getFeatures()`	Collection<Feature>	取选中集合，可监听其变化
`clear()`	void	清空选中
`getHitTolerance()`	number	取命中容差
`setHitTolerance(t)`	void	改命中容差
`setActive(active)`	void	启停选择

事件

事件	回调参数	说明
`select`	`evt.selected`、`evt.deselected`	选中集合变化，两个参数都是要素数组

var select = new ol.interaction.Select({
  layers: [vectorLayer],
  hitTolerance: 6,
  multi: false,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({ color: '#e8a33d', width: 4 }),
    fill: new ol.style.Fill({ color: 'rgba(232, 163, 61, 0.25)' })
  })
});
map.addInteraction(select);

select.on('select', function (evt) {
  var picked = evt.selected[0];
  if (picked) {
    console.log(picked.get('name'));
  } else {
    console.log('取消选中');
  }
});

// 清除高亮
select.getFeatures().clear();

注意事项

getFeatures() 是集合而非数组，遍历用 forEach，取首个用 item(0)。
multi 为 false 时新的选中会替换旧的，需要框选多个要素就打开 multi 或改条件。
选中高亮由交互内部的独立图层绘制，不依赖原图层样式，改原图层样式不会影响高亮效果。
hitTolerance 以屏幕像素计，线要素过细时设为 4 到 8 更容易点中。

引用本文

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