`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

矩形框选

DragBox 交互负责拉框,框选结束后自己判断哪些要素落在范围里。

OpenLayers 10.3.1 · 更新 2026-10-28
`r`n
源码与运行效果
运行效果
`r`n

说明

示例铺了 90 个格网点,ol.interaction.DragBox 的 condition 设为 platformModifierKeyOnly,即按住 Shift 才触发,避免与普通拖动冲突。boxend 事件里取 getGeometry().getExtent(),逐个比较要素坐标,命中者换成红色样式,并把范围转成经纬度显示。

操作结果
按住 Shift 拖动画出矩形,松开后统计命中要素
再次框选其他区域上一次的高亮被清除,只保留本次结果
缩放后再框选范围换算出的经纬度随之变化

要点

  • 判断点是否在范围内只需比较四个边界,不必构造几何。
  • 把要素样式置空即可恢复图层默认样式。

框选大范围时逐个比较仍然很快;要素上万时改用 source.forEachFeatureInExtent 更省。

`r`n
`r`n