-
-
Notifications
You must be signed in to change notification settings - Fork 3k
/
DragZoom.js
84 lines (74 loc) · 2.53 KB
/
DragZoom.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/**
* @module ol/interaction/DragZoom
*/
import DragBox from './DragBox.js';
import {easeOut} from '../easing.js';
import {shiftKeyOnly} from '../events/condition.js';
/**
* @typedef {Object} Options
* @property {string} [className='ol-dragzoom'] 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 module:ol/events/condition.shiftKeyOnly}.
* @property {number} [duration=200] Animation duration in milliseconds.
* @property {boolean} [out=false] Use interaction for zooming out.
* @property {number} [minArea=64] The minimum area of the box in pixel, this value is used by the parent default
* `boxEndCondition` function.
*/
/**
* @classdesc
* Allows the user to zoom the map by clicking and dragging on the map,
* normally combined with an {@link module:ol/events/condition} that limits
* it to when a key, shift by default, is held down.
*
* To change the style of the box, use CSS and the `.ol-dragzoom` selector, or
* your custom one configured with `className`.
* @api
*/
class DragZoom extends DragBox {
/**
* @param {Options} [options] Options.
*/
constructor(options) {
options = options ? options : {};
const condition = options.condition ? options.condition : shiftKeyOnly;
super({
condition: condition,
className: options.className || 'ol-dragzoom',
minArea: options.minArea,
});
/**
* @private
* @type {number}
*/
this.duration_ = options.duration !== undefined ? options.duration : 200;
/**
* @private
* @type {boolean}
*/
this.out_ = options.out !== undefined ? options.out : false;
}
/**
* Function to execute just before `onboxend` is fired
* @param {import("../MapBrowserEvent.js").default} event Event.
*/
onBoxEnd(event) {
const map = this.getMap();
const view = /** @type {!import("../View.js").default} */ (map.getView());
let geometry = this.getGeometry();
if (this.out_) {
const rotatedExtent = view.rotatedExtentForGeometry(geometry);
const resolution = view.getResolutionForExtentInternal(rotatedExtent);
const factor = view.getResolution() / resolution;
geometry = geometry.clone();
geometry.scale(factor * factor);
}
view.fitInternal(geometry, {
duration: this.duration_,
easing: easeOut,
});
}
}
export default DragZoom;