simplify zoom transform math

changes the transform origin for all layers from 50% 50% (implied
default) to 0 0, making it MUCH easier to understand zoom transform
math.
This commit is contained in:
Vladimir Agafonkin 2015-06-04 21:12:50 +03:00
parent 2cf8cc008a
commit 1e9c8649b3
3 changed files with 14 additions and 11 deletions

5
dist/leaflet.css vendored
View File

@ -153,6 +153,11 @@
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
will-change: transform;
}

View File

@ -118,12 +118,8 @@ L.ImageOverlay = L.Layer.extend({
},
_animateZoom: function (e) {
var scale = this._map.getZoomScale(e.zoom);
var bounds = new L.Bounds(
this._map._latLngToNewLayerPoint(this._bounds.getNorthWest(), e.zoom, e.center),
this._map._latLngToNewLayerPoint(this._bounds.getSouthEast(), e.zoom, e.center));
var offset = bounds.min.add(bounds.getSize()._multiplyBy((1 - 1 / scale) / 2));
var scale = this._map.getZoomScale(e.zoom),
offset = this._map._latLngToNewLayerPoint(this._bounds.getNorthWest(), e.zoom, e.center);
L.DomUtil.setTransform(this._image, offset, scale);
},

View File

@ -8,7 +8,7 @@ L.Renderer = L.Layer.extend({
options: {
// how much to extend the clip area around the map view (relative to its size)
// e.g. 0.1 would be 10% of map view in each direction; defaults to clip with the map view
padding: 0
padding: 0.1
},
initialize: function (options) {
@ -44,9 +44,8 @@ L.Renderer = L.Layer.extend({
},
_animateZoom: function (e) {
var scale = this._map.getZoomScale(e.zoom),
origin = this._map._getCenterOffset(e.center).multiplyBy(scale),
offset = this._bounds.min.subtract(origin).round();
var scale = this._map.getZoomScale(e.zoom, this._zoom),
offset = this._map._latLngToNewLayerPoint(this._topLeft, e.zoom, e.center);
L.DomUtil.setTransform(this._container, offset, scale);
},
@ -58,6 +57,9 @@ L.Renderer = L.Layer.extend({
min = this._map.containerPointToLayerPoint(size.multiplyBy(-p)).round();
this._bounds = new L.Bounds(min, min.add(size.multiplyBy(1 + p * 2)).round());
this._topLeft = this._map.layerPointToLatLng(min);
this._zoom = this._map.getZoom();
}
});