Graceful degradation of zoom-pan animations, fixes #3272.

This commit is contained in:
Iván Sánchez Ortega 2015-05-11 16:54:46 +02:00
parent b0d44ca610
commit 9274ee2b5f
4 changed files with 29 additions and 14 deletions

View File

@ -13,6 +13,10 @@
width: 600px;
height: 400px;
}
button {
min-width: 3em;
text-align: center;
}
</style>
<script type="text/javascript" src="../../build/deps.js"></script>
@ -22,21 +26,22 @@
<div id="map"></div>
<div style="position: absolute; left: 530px; top: 10px; z-index: 500">
<!-- <button id="london">London</button>
<button id="kyiv">Kyiv</button> -->
<button id="dc">DC</button>
<button id="sf">SF</button>
<button id="trd">TRD</button>
<button id="stop">stop</button>
<div style="position: absolute; left: 620px; top: 10px; z-index: 500">
<div><button id="dc">DC</button></div>
<div><button id="sf">SF</button></div>
<div><button id="trd">TRD</button>(flyTo 20 sec)</div>
<div><button id="lnd">LND</button>(fract. zoom)</div>
<div><button id="kyiv">KIEV</button>(setView, fract. zoom)</div>
<div><button id="stop">stop</button></div>
<div id='pos'></div>
</div>
<script type="text/javascript">
var kyiv = [50.5, 30.5],
london = [51.51, -0.12],
lnd = [51.51, -0.12],
sf = [37.77, -122.42],
dc = [38.91, -77.04];
dc = [38.91, -77.04],
trd = [63.41, 10.41];
var map = L.map('map').setView(dc, 10);
@ -47,19 +52,24 @@
}).addTo(map);
var marker1 = L.marker(kyiv).addTo(map),
marker2 = L.marker(london).addTo(map);
marker2 = L.marker(lnd).addTo(map);
// marker3 = L.marker(dc).addTo(map),
// marker4 = L.marker(sf).addTo(map);
document.getElementById('dc').onclick = function () { map.flyTo(dc, 10); };
document.getElementById('sf').onclick = function () { map.flyTo(sf, 10); };
document.getElementById('trd').onclick = function () { map.flyTo(trd, 10, {duration: 20}); };
document.getElementById('lnd').onclick = function () { map.flyTo(lnd, 9.25); };
document.getElementById('kyiv').onclick = function () { map.setView(kyiv, 9.25); };
document.getElementById('stop').onclick = function () { map.stop(); };
// document.getElementById('london').onclick = function () { map.flyTo(london); };
// document.getElementById('kyiv').onclick = function () { map.flyTo(kyiv); };
function logEvent(e) { console.log(e.type); }
map.on('move', function(){
document.getElementById('pos').innerHTML = map.getCenter() + ' z' + map.getZoom();
});
// map.on('click', logEvent);
// map.on('movestart', logEvent);

View File

@ -349,7 +349,11 @@ L.GridLayer = L.Layer.extend({
translate = level.origin.multiplyBy(scale)
.subtract(this._map._getNewPixelOrigin(center, zoom)).round();
L.DomUtil.setTransform(level.el, translate, scale);
if (L.Browser.any3d) {
L.DomUtil.setTransform(level.el, translate, scale);
} else {
L.DomUtil.setPosition(level.el, translate);
}
},
_resetGrid: function () {

View File

@ -766,6 +766,7 @@ L.Map = L.Evented.extend({
_limitZoom: function (zoom) {
var min = this.getMinZoom(),
max = this.getMaxZoom();
if (!L.Browser.any3d) { zoom = Math.round(zoom); }
return Math.max(min, Math.min(max, zoom));
}

View File

@ -3,7 +3,7 @@ L.Map.include({
flyTo: function (targetCenter, targetZoom, options) {
options = options || {};
if (options.animate === false) {
if (options.animate === false || !L.Browser.any3d) {
return this.setView(targetCenter, targetZoom, options);
}