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:
parent
74133f49f0
commit
00a66b4731
@ -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); };
|
||||
|
||||
|
@ -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) {
|
||||
|
@ -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),
|
||||
|
Loading…
Reference in New Issue
Block a user