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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
|
/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
* full list of contributors). Published under the Clear BSD license.
* See http://svn.openlayers.org/trunk/openlayers/license.txt for the
* full text of the license. */
/**
* @requires OpenLayers/Handler/Pinch.js
*/
/**
* Class: OpenLayers.Control.PinchZoom
*
* Inherits:
* - <OpenLayers.Control>
*/
OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
/**
* Property: type
* {OpenLayers.Control.TYPES}
*/
type: OpenLayers.Control.TYPE_TOOL,
/**
* Property: containerOrigin
* {Object} Cached object representing the layer container origin (in pixels).
*/
containerOrigin: null,
/**
* Property: pinchOrigin
* {Object} Cached object representing the pinch start (in pixels).
*/
pinchOrigin: null,
/**
* Property: currentCenter
* {Object} Cached object representing the latest pinch center (in pixels).
*/
currentCenter: null,
/**
* APIProperty: autoActivate
* {Boolean} Activate the control when it is added to a map. Default is
* true.
*/
autoActivate: true,
/**
* Constructor: OpenLayers.Control.PinchZoom
* Create a control for zooming with pinch gestures. This works on devices
* with multi-touch support.
*
* Parameters:
* options - {Object} An optional object whose properties will be set on
* the control
*/
initialize: function(options) {
OpenLayers.Control.prototype.initialize.apply(this, arguments);
this.handler = new OpenLayers.Handler.Pinch(this, {
start: this.pinchStart,
move: this.pinchMove,
done: this.pinchDone
}, this.handlerOptions);
},
/**
* APIMethod: activate
* Activate this control. Must be called after the control is added to a
* map.
*
* Returns:
* {Boolean} The control was successfully activated.
*/
activate: function() {
var activated = OpenLayers.Control.prototype.activate.apply(this,arguments);
if (activated) {
this.map.events.on({
moveend: this.updateContainerOrigin,
scope: this
});
this.updateContainerOrigin();
}
return activated;
},
/**
* APIMethod: deactivate
* Deactivate this control.
*
* Returns:
* {Boolean} The control was successfully deactivated.
*/
deactivate: function() {
var deactivated = OpenLayers.Control.prototype.deactivate.apply(this,arguments);
if (this.map && this.map.events) {
this.map.events.un({
moveend: this.updateContainerOrigin,
scope: this
});
}
return deactivated;
},
/**
* Method: updateContainerOrigin
* Must be called each time the layer container origin changes.
*/
updateContainerOrigin: function() {
var container = this.map.layerContainerDiv;
this.containerOrigin = {
x: parseInt(container.style.left, 10),
y: parseInt(container.style.top, 10)
};
},
/**
* Method: pinchStart
*
* Parameters:
* evt - {Event}
* pinchData - {Object} pinch data object related to the current touchmove
* of the pinch gesture. This give us the current scale of the pinch.
*/
pinchStart: function(evt, pinchData) {
this.pinchOrigin = evt.xy;
this.currentCenter = evt.xy;
},
/**
* Method: pinchMove
*
* Parameters:
* evt - {Event}
* pinchData - {Object} pinch data object related to the current touchmove
* of the pinch gesture. This give us the current scale of the pinch.
*/
pinchMove: function(evt, pinchData) {
var scale = pinchData.scale;
var containerOrigin = this.containerOrigin;
var pinchOrigin = this.pinchOrigin;
var current = evt.xy;
var dx = Math.round((current.x - pinchOrigin.x) + (scale - 1) * (containerOrigin.x - pinchOrigin.x));
var dy = Math.round((current.y - pinchOrigin.y) + (scale - 1) * (containerOrigin.y - pinchOrigin.y));
this.applyTransform(
"translate(" + dx + "px, " + dy + "px) scale(" + scale + ")"
);
this.currentCenter = current;
},
/**
* Method: applyTransform
* Applies the given transform to layers.
*/
applyTransform: function(transform) {
var style = this.map.layerContainerDiv.style;
style['-webkit-transform'] = transform;
style['-moz-transform'] = transform;
},
/**
* Method: pinchDone
*
* Parameters:
* evt - {Event}
* start - {Object} pinch data object related to the touchstart event that
* started the pinch gesture.
* last - {Object} pinch data object related to the last touchmove event
* of the pinch gesture. This give us the final scale of the pinch.
*/
pinchDone: function(evt, start, last) {
this.applyTransform("");
var zoom = this.map.getZoomForResolution(this.map.getResolution() / last.scale, true);
if (zoom !== this.map.getZoom() || !this.currentCenter.equals(this.pinchOrigin)) {
var resolution = this.map.getResolutionForZoom(zoom);
var location = this.map.getLonLatFromPixel(this.pinchOrigin);
var zoomPixel = this.currentCenter;
var size = this.map.getSize();
location.lon += resolution * ((size.w / 2) - zoomPixel.x);
location.lat -= resolution * ((size.h / 2) - zoomPixel.y);
this.map.setCenter(location, zoom);
}
},
CLASS_NAME: "OpenLayers.Control.PinchZoom"
});
|
