OpenLayers源码解析11 ol/interaction/DragBox.js

本文档详细解析了OpenLayers库中ol/interaction/DragBox.js的源码,该模块主要用于实现用户通过拖拽创建选择框的功能,尤其适用于矢量数据的选择。DragBox交互继承自PointerInteraction,其构造函数DragBox({})允许定制行为,并常与特定的事件条件结合使用。
摘要由CSDN通过智能技术生成

ol/interaction/DragBox.js

父类

ol/interaction/Pointer-PointerInteraction

主要功能

让用户通过拖拽框选择矢量。
经常和module:ol/events/condition共同使用。

参数:DragBox({})

参数 类型 说明
condition module:ol/events/condition~Condition 判断一个浏览器事件是否应该触发,默认是ol/events/condition~mouseActionButton.
ol.events.condition.platformModifierKeyOnly代表必须按ctrl

方法

函数名 参数 源码 返回值类型 功能
on(type, listener) type string或Array.< string> 事件或事件列表
listener function 监听器函数
Observable.js, line 155 {module:ol/events~EventsKey Array.module:ol/events~EventsKey}
getGeometry() interaction/DragBox.js, line 199 {module:ol/geom/Polygon~Polygon} 返回拖拽框的geometry
/**
 * @module ol/interaction/DragBox
 */
// FIXME draw drag box
import Event from '../events/Event.js';
import PointerInteraction from './Pointer.js';
import RenderBox from '../render/Box.js';
import {
   mouseActionButton} from '../events/condition.js';

/**
 * A function that takes a {@link module:ol/MapBrowserEvent} and two
 * {@link module:ol/pixel~Pixel}s and returns a `{boolean}`. If the condition is met,
 * true should be returned.
 * @typedef {function(this: ?, import("../MapBrowserEvent.js").default, import("../pixel.js").Pixel, import("../pixel.js").Pixel):boolean} EndCondition
 */

/**
 * @typedef {Object} Options
 * @property {string} [className='ol-dragbox'] CSS class name for styling the box.
 * @property {import("../events/condition.js").Condition} [condition] A function that takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a boolean
 * to indicate whether that event should be handled.
 * Default is {@link ol/events/condition~mouseActionButton}.
 * @property {number} [minArea=64] The minimum area of the box in pixel, this value is used by the default
 * `boxEndCondition` function.
 * @property {EndCondition} [boxEndCondition] A function that takes a {@link module:ol/MapBrowserEvent~MapBrowserEvent} and two
 * {@link module:ol/pixel~Pixel}s to indicate whether a `boxend` event should be fired.
 * Default is `true` if the area of the box is bigger than the `minArea` option.
 * @property {function(this:DragBox, import("../MapBrowserEvent.js").default):void} [onBoxEnd] Code to execute just
 * before `boxend` is fired.
 */

/**
 * @enum {string}
 */
const DragBoxEventType = {
   
  /**
   * Triggered upon drag box start.
   * @event DragBoxEvent#boxstart
   * @api
   */
  BOXSTART: 'boxstart',

  /**
   * Triggered on drag when box is active.
   * @event DragBoxEvent#boxdrag
   * @api
   */
  BOXDRAG: 'boxdrag',

  /**
   * Triggered upon drag box end.
   * @event DragBoxEvent#boxend
   * @api
   */
  BOXEND: 'boxend',

  /**
   * Triggered upon drag box canceled.
   * @event DragBoxEvent#box
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值