Graceful degradation of zoom-pan animations, fixes #3272.
This commit is contained in:
parent
b0d44ca610
commit
9274ee2b5f
@ -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);
|
||||
|
@ -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 () {
|
||||
|
@ -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));
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user