[OpenLayers-Users] HELP! OL 2.13: Google v3 and other layers not zooming "together"
marco.borsoi
marco.borsoi at gmail.com
Thu Aug 1 06:54:00 PDT 2013
Hello,
Here is how I "solved" the problem:
1. I created a new pinchZoom control to not apply the transformation to the
other layers and avoid the strange effect. I just commented the line:
this.map.applyTransform(dx, dy, scale); inside the PinchMove method.
2. I extended the Navigation control to modify the draw method to recognize
the custom pinchZoom instead the default.
3. Remove all the controls before initialize the map and add the custom
control.
-----------------------------------------
(!) IMPORTANT: I am new to OpenLayers and I really don't know if this is the
best solution, but the fact is that this solved my problem.
-----------------------------------------
-----------------------------------------
(!) IMPORTANT: I add this custom control only if the map contains a
GoogleMaps layer.
-----------------------------------------
The javascripts:
1. PinchZoomControl.js
/**
* Class: YourApp.Control.PinchZoom
*
* Inherits:
* - <OpenLayers.Control>
*/
YourApp.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
/**
* Property: type
* {OpenLayers.Control.TYPES}
*/
type: OpenLayers.Control.TYPE_TOOL,
/**
* 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,
/**
* 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
* {Object} Used to set non-default properties on the pinch handler
*/
/**
* 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);
},
/**
* 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) {
var xy = (this.preserveCenter) ?
this.map.getPixelFromLonLat(this.map.getCenter()) : evt.xy;
this.pinchOrigin = xy;
this.currentCenter = 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.map.layerContainerOriginPx;
var pinchOrigin = this.pinchOrigin;
var current = (this.preserveCenter) ?
this.map.getPixelFromLonLat(this.map.getCenter()) : evt.xy;
var dx = Math.round((containerOrigin.x + current.x - pinchOrigin.x)
+ (scale - 1) * (containerOrigin.x - pinchOrigin.x));
var dy = Math.round((containerOrigin.y + current.y - pinchOrigin.y)
+ (scale - 1) * (containerOrigin.y - pinchOrigin.y));
*/*
* Remove the transformation
*/
//this.map.applyTransform(dx, dy, scale);*
this.currentCenter = current;
},
/**
* 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.map.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);
// Force a reflow before calling setCenter. This is to work
// around an issue occuring in iOS.
//
// See https://github.com/openlayers/openlayers/pull/351.
//
// Without a reflow setting the layer container div's top left
// style properties to "0px" - as done in Map.moveTo when zoom
// is changed - won't actually correctly reposition the layer
// container div.
//
// Also, we need to use a statement that the Google Closure
// compiler won't optimize away.
this.map.div.clientWidth = this.map.div.clientWidth;
this.map.setCenter(location, zoom);
}
},
CLASS_NAME: "YourApp.Control.PinchZoom"
});
2. Extended Navigation control and modify the draw method:
var customNavigationControl = new OpenLayers.Control.Navigation();
OpenLayers.Util.extend(customNavigationControl, {
draw: function() {
if (this.handleRightClicks) {
this.map.viewPortDiv.oncontextmenu =
OpenLayers.Function.False;
}
var clickCallbacks = {
'click': this.defaultClick,
'dblclick': this.defaultDblClick,
'dblrightclick': this.defaultDblRightClick
};
var clickOptions = {
'double': true,
'stopDouble': true
};
this.handlers.click = new OpenLayers.Handler.Click(
this, clickCallbacks, clickOptions
);
this.dragPan = new OpenLayers.Control.DragPan(
OpenLayers.Util.extend({
map: this.map,
documentDrag: this.documentDrag
}, this.dragPanOptions)
);
this.zoomBox = new OpenLayers.Control.ZoomBox(
{map: this.map, keyMask: this.zoomBoxKeyMask});
this.dragPan.draw();
this.zoomBox.draw();
var wheelOptions = this.map.fractionalZoom ? {} : {
cumulative: false,
interval: 50,
maxDelta: 6
};
this.handlers.wheel = new OpenLayers.Handler.MouseWheel(
this, {up : this.wheelUp, down: this.wheelDown},
OpenLayers.Util.extend(wheelOptions, this.mouseWheelOptions)
);
if (OpenLayers.Control.PinchZoom) {
/*
* Change the default OpenLayers.Control.PinchZoom by your
custom control.
*/
this.pinchZoom = new *YourApp.Control.PinchZoom*(
OpenLayers.Util.extend(
{map: this.map}, this.pinchZoomOptions));
}
}
});
3. Add the control to your map:
map.addControl(customNavigationControl);
--
View this message in context: http://osgeo-org.1560.x6.nabble.com/HELP-OL-2-13-Google-v3-and-other-layers-not-zooming-together-tp5060658p5070251.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.
More information about the Users
mailing list