cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

simplify zoom transform math

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
dist/leaflet.css vendored
View File

@ -153,6 +153,11 @@
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup { .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1; 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 { .leaflet-zoom-anim .leaflet-zoom-animated {
will-change: transform; will-change: transform;
} }

8
src/layer/ImageOverlay.js
View File

@ -118,12 +118,8 @@ L.ImageOverlay = L.Layer.extend({
}, },
_animateZoom: function (e) { _animateZoom: function (e) {
var scale = this._map.getZoomScale(e.zoom); var scale = this._map.getZoomScale(e.zoom),
var bounds = new L.Bounds( offset = this._map._latLngToNewLayerPoint(this._bounds.getNorthWest(), e.zoom, e.center);
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));
L.DomUtil.setTransform(this._image, offset, scale); L.DomUtil.setTransform(this._image, offset, scale);
}, },

10
src/layer/vector/Renderer.js
View File

@ -8,7 +8,7 @@ L.Renderer = L.Layer.extend({
options: { options: {
// how much to extend the clip area around the map view (relative to its size) // 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 // 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) { initialize: function (options) {
@ -44,9 +44,8 @@ L.Renderer = L.Layer.extend({
}, },
_animateZoom: function (e) { _animateZoom: function (e) {
var scale = this._map.getZoomScale(e.zoom), var scale = this._map.getZoomScale(e.zoom, this._zoom),
origin = this._map._getCenterOffset(e.center).multiplyBy(scale), offset = this._map._latLngToNewLayerPoint(this._topLeft, e.zoom, e.center);
offset = this._bounds.min.subtract(origin).round();
L.DomUtil.setTransform(this._container, offset, scale); L.DomUtil.setTransform(this._container, offset, scale);
}, },
@ -58,6 +57,9 @@ L.Renderer = L.Layer.extend({
min = this._map.containerPointToLayerPoint(size.multiplyBy(-p)).round(); min = this._map.containerPointToLayerPoint(size.multiplyBy(-p)).round();
this._bounds = new L.Bounds(min, min.add(size.multiplyBy(1 + p * 2)).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();
} }
}); });