ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #802 from pgiraud/pinch_preserve_center_

Browse Source 
Pinch preserve center
This commit is contained in:
Pierre GIRAUD
2012-12-18 00:20:18 -08:00
parent c9fa5aabad d0c85850f5
commit b404ca0a7a
2 changed files with 64 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/OpenLayers/Control/PinchZoom.js
+17 -3
View File
@@ -40,6 +40,17 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
* true. * true.
*/ */
autoActivate: true, autoActivate: true,
/**
* APIProperty: preserveCenter
* {Boolean} Set this to true if you don't want the map center to change
* while pinching. For example you may want to set preserveCenter to
* true when the user location is being watched and you want to preserve
* the user location at the center of the map even if he zooms in or
* out using pinch. This property's value can be changed any time on an
* existing instance. Default is false.
*/
preserveCenter: false,
/** /**
* APIProperty: handlerOptions * APIProperty: handlerOptions
@@ -73,8 +84,10 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
* of the pinch gesture. This give us the current scale of the pinch. * of the pinch gesture. This give us the current scale of the pinch.
*/ */
pinchStart: function(evt, pinchData) { pinchStart: function(evt, pinchData) {
this.pinchOrigin = evt.xy; var xy = (this.preserveCenter) ?
this.currentCenter = evt.xy; this.map.getPixelFromLonLat(this.map.getCenter()) : evt.xy;
this.pinchOrigin = xy;
this.currentCenter = xy;
}, },
/** /**
@@ -89,7 +102,8 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
var scale = pinchData.scale; var scale = pinchData.scale;
var containerOrigin = this.map.layerContainerOriginPx; var containerOrigin = this.map.layerContainerOriginPx;
var pinchOrigin = this.pinchOrigin; var pinchOrigin = this.pinchOrigin;
var current = evt.xy; var current = (this.preserveCenter) ?
this.map.getPixelFromLonLat(this.map.getCenter()) : evt.xy;
var dx = Math.round((current.x - pinchOrigin.x) + (scale - 1) * (containerOrigin.x - pinchOrigin.x)); 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)); var dy = Math.round((current.y - pinchOrigin.y) + (scale - 1) * (containerOrigin.y - pinchOrigin.y));
tests/Control/PinchZoom.html
+47
View File
@@ -79,6 +79,53 @@
} }
function test_pinchMove_preservecenter(t) {
var control = new OpenLayers.Control.PinchZoom({
preserveCenter: true
});
var map = new OpenLayers.Map({
div: "map",
controls: [control],
layers: [new OpenLayers.Layer('fake', {isBaseLayer: true})]
});
map.zoomToMaxExtent();
var centerPx = map.getPixelFromLonLat(map.getCenter());
control.pinchStart = function(evt, pinchData) {
t.eq(control.pinchOrigin, centerPx, "center preserved");
t.eq(control.currentCenter, centerPx, "center preserved");
}
control.pinchStart(null);
var log = [];
control.applyTransform = function(transform) {
log.push(transform);
}
control.pinchOrigin = map.getPixelFromLonLat(map.getCenter());
var cases = [
{scale: 1, transform: "translate(0px, 0px) scale(1)"},
{scale: 2, transform: "translate(-128px, -128px) scale(2)"},
{scale: 2.5, transform: "translate(-192px, -192px) scale(2.5)"},
{scale: 0.25, transform: "translate(96px, 96px) scale(0.25)"}
];
var len = cases.length;
t.plan(2 + len*2);
var c;
for (var i=0; i<len; ++i) {
c = cases[i];
control.pinchMove(null, {scale: c.scale});
t.eq(log.length, i+1, i + " called once");
t.eq(log[i], c.transform, i + " correct transform");
}
}
</script> </script>
</head> </head>
<body> <body>