首页 / OpenLayers / 使用示例
`r`n 矩形框选
DragBox 交互负责拉框,框选结束后自己判断哪些要素落在范围里。
源码与运行效果
说明
示例铺了 90 个格网点,ol.interaction.DragBox 的 condition 设为 platformModifierKeyOnly,即按住 Shift 才触发,避免与普通拖动冲突。boxend 事件里取 getGeometry().getExtent(),逐个比较要素坐标,命中者换成红色样式,并把范围转成经纬度显示。
| 操作 | 结果 |
|---|---|
| 按住 Shift 拖动 | 画出矩形,松开后统计命中要素 |
| 再次框选其他区域 | 上一次的高亮被清除,只保留本次结果 |
| 缩放后再框选 | 范围换算出的经纬度随之变化 |
要点
- 判断点是否在范围内只需比较四个边界,不必构造几何。
- 把要素样式置空即可恢复图层默认样式。
框选大范围时逐个比较仍然很快;要素上万时改用 source.forEachFeatureInExtent 更省。