Add an element for tracking zoom animations. Use it for trying to stop a map zoom. Still doesn't quite work right. Stopping a zoomPan or PanAnimation does work however. Code is all cludgy :)

refs #2560
This commit is contained in:
Dave Leaver 2014-03-20 10:26:29 +13:00 committed by Vladimir Agafonkin
parent 74133f49f0
commit 00a66b4731
3 changed files with 80 additions and 4 deletions

View File

@ -27,6 +27,7 @@
<button id="kyiv">Kyiv</button> -->
<button id="dc">DC</button>
<button id="sf">SF</button>
<button id="stop">stop</button>
</div>
<script type="text/javascript">
@ -48,8 +49,9 @@
// marker3 = L.marker(dc).addTo(map),
// marker4 = L.marker(sf).addTo(map);
document.getElementById('dc').onclick = function () { map.zoomPanTo(dc); };
document.getElementById('sf').onclick = function () { map.zoomPanTo(sf); };
document.getElementById('dc').onclick = function () { map.zoomPanTo(dc, 10); };
document.getElementById('sf').onclick = function () { map.zoomPanTo(sf, 10); };
document.getElementById('stop').onclick = function () { map.stopAnimation(); };
// document.getElementById('london').onclick = function () { map.zoomPanTo(london); };
// document.getElementById('kyiv').onclick = function () { map.zoomPanTo(kyiv); };

View File

@ -48,6 +48,8 @@ L.Map = L.Evented.extend({
this.callInitHooks();
this._addLayers(this.options.layers);
this._createAnimProxy();
},
@ -194,6 +196,50 @@ L.Map = L.Evented.extend({
});
},
stopAnimation: function () {
//TODO: Need to know if we are in a anim so we can fire zoomend
//zoomPan
L.Util.cancelAnimFrame(this._zoomPanFrame);
//PosAnimation
if (this._panAnim && this._panAnim._inProgress) {
this._panAnim.stop(); //This handles everything
return;
}
//zoomAnimation
if (this._animatingZoom) {
//Calculate _animateToZoom and _animateToCenter
var regex = /([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*\)/;
var style = window.getComputedStyle(this._proxy._el);
var matches = style[L.DomUtil.TRANSFORM].match(regex);
//Assuming this works!
//debugger;
this._animateToZoom = this.getScaleZoom(parseFloat(matches[1]), 1);
var px = L.point(matches[2], matches[3]);
this._animateToCenter = this.unproject(px, 14);
console.log('stop', this._animateToCenter);
//this._animateToCenter.lat = parseFloat(matches[2]);
//this._animateToCenter.lng = parseFloat(matches[3]);
//L.Util.falseFn(map._panes.mapPane.offsetWidth);
this._onZoomTransitionEnd();
//L.Util.falseFn(map._panes.mapPane.offsetWidth);
//Something like _onZoomTransitionEnd, but not quite, we don't want the _resetView call
//Or if we set _animateToCenter and _animateToZoom then we can just call it
}
//TODO do a reset view
},
// TODO handler.addTo
addHandler: function (name, HandlerClass) {
if (!HandlerClass) { return this; }
@ -476,11 +522,38 @@ L.Map = L.Evented.extend({
}
},
_createAnimProxy: function () {
var proxy = new L.Layer();
this._proxy = proxy;
proxy.onAdd = function () {
proxy._el = L.DomUtil.create('div', 'leaflet-proxy leaflet-zoom-animated');
proxy.getPane().appendChild(proxy._el);
this.update();
};
proxy._animateZoom = function (e) {
//TODO: Will probably need to do e.offset in the translate
L.DomUtil.setTransform(proxy._el, this._map.project(e.center, 14), this._map.getZoomScale(e.zoom, 1));
console.log('anim', e.center);
};
proxy.update = function () {
var c = this._map.getCenter();
L.DomUtil.setTransform(proxy._el, this._map.project(c, 14), this._map.getZoomScale(this._map.getZoom(), 1));
console.log('update', c);
};
proxy.getEvents = function () {
return { zoomanim: proxy._animateZoom, viewreset: proxy.update };
};
this.addLayer(proxy);
},
// private methods that modify map state
_resetView: function (center, zoom, preserveMapOffset, afterZoomAnim) {
//console.log('resetView', center, zoom);
var zoomChanged = (this._zoom !== zoom);
if (!afterZoomAnim) {

View File

@ -36,11 +36,12 @@ L.Map.include({
duration = 1000 * S * 0.8;
function frame() {
//console.log('frame');
var t = (Date.now() - start) / duration,
s = easeOut(t) * S;
if (t <= 1) {
L.Util.requestAnimFrame(frame, this);
this._zoomPanFrame = L.Util.requestAnimFrame(frame, this);
this._resetView(
this.unproject(from.add(to.subtract(from).multiplyBy(u(s) / u1)), startZoom),