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

Implement non-square tiles for L.GridLayer, see #3570

Browse Source
This commit is contained in:
Iván Sánchez Ortega 2015-06-30 13:54:56 +02:00
parent 7e45690169
commit cf5111306f
3 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
debug/tests/tile-bounds.html
View File

@ -37,7 +37,8 @@
var map = L.map('map', mapopts);
var grid = L.gridLayer({
attribution: 'Grid Layer'
attribution: 'Grid Layer',
tileSize: L.point(150, 80)
});
grid.createTile = function (coords, done) {

8
src/geometry/Point.js
View File

@ -55,6 +55,14 @@ L.Point.prototype = {
return this;
},
dotProduct: function(point) {
return new L.Point(this.x * point.x, this.y * point.y);
},
dotDivision: function(point) {
return new L.Point(this.x / point.x, this.y / point.y);
},
round: function () {
return this.clone()._round();
},

37
src/layer/tile/GridLayer.js
View File

@ -122,6 +122,11 @@ L.GridLayer = L.Layer.extend({
return document.createElement('div');
},
getTileSize: function () {
var s = this.options.tileSize;
return s instanceof L.Point ? s : new L.Point(s, s);
},
_updateZIndex: function () {
if (this._container && this.options.zIndex !== undefined && this.options.zIndex !== null) {
this._container.style.zIndex = this.options.zIndex;
@ -384,7 +389,7 @@ L.GridLayer = L.Layer.extend({
_resetGrid: function () {
var map = this._map,
crs = map.options.crs,
tileSize = this._tileSize = this._getTileSize(),
tileSize = this._tileSize = this.getTileSize(),
tileZoom = this._tileZoom;
var bounds = this._map.getPixelWorldBounds(this._tileZoom);
@ -393,19 +398,15 @@ L.GridLayer = L.Layer.extend({
}
this._wrapX = crs.wrapLng && [
Math.floor(map.project([0, crs.wrapLng[0]], tileZoom).x / tileSize),
Math.ceil(map.project([0, crs.wrapLng[1]], tileZoom).x / tileSize)
Math.floor(map.project([0, crs.wrapLng[0]], tileZoom).x / tileSize.x),
Math.ceil(map.project([0, crs.wrapLng[1]], tileZoom).x / tileSize.y)
];
this._wrapY = crs.wrapLat && [
Math.floor(map.project([crs.wrapLat[0], 0], tileZoom).y / tileSize),
Math.ceil(map.project([crs.wrapLat[1], 0], tileZoom).y / tileSize)
Math.floor(map.project([crs.wrapLat[0], 0], tileZoom).y / tileSize.x),
Math.ceil(map.project([crs.wrapLat[1], 0], tileZoom).y / tileSize.y)
];
},
_getTileSize: function () {
return this.options.tileSize;
},
_onMoveEnd: function () {
if (!this._map) { return; }
@ -510,10 +511,10 @@ L.GridLayer = L.Layer.extend({
_tileCoordsToBounds: function (coords) {
var map = this._map,
tileSize = this._getTileSize(),
tileSize = this.getTileSize(),
nwPoint = coords.multiplyBy(tileSize),
sePoint = nwPoint.add([tileSize, tileSize]),
nwPoint = coords.dotProduct(tileSize),
sePoint = nwPoint.add(tileSize),
nw = map.wrapLatLng(map.unproject(nwPoint, coords.z)),
se = map.wrapLatLng(map.unproject(sePoint, coords.z));
@ -551,8 +552,9 @@ L.GridLayer = L.Layer.extend({
_initTile: function (tile) {
L.DomUtil.addClass(tile, 'leaflet-tile');
tile.style.width = this._tileSize + 'px';
tile.style.height = this._tileSize + 'px';
var tileSize = this.getTileSize();
tile.style.width = tileSize.x + 'px';
tile.style.height = tileSize.y + 'px';
tile.onselectstart = L.Util.falseFn;
tile.onmousemove = L.Util.falseFn;
@ -642,7 +644,7 @@ L.GridLayer = L.Layer.extend({
},
_getTilePos: function (coords) {
return coords.multiplyBy(this._tileSize).subtract(this._level.origin);
return coords.dotProduct(this.getTileSize()).subtract(this._level.origin);
},
_wrapCoords: function (coords) {
@ -654,9 +656,10 @@ L.GridLayer = L.Layer.extend({
},
_pxBoundsToTileRange: function (bounds) {
var tileSize = this.getTileSize();
return new L.Bounds(
bounds.min.divideBy(this._tileSize).floor(),
bounds.max.divideBy(this._tileSize).ceil().subtract([1, 1]));
bounds.min.dotDivision(tileSize).floor(),
bounds.max.dotDivision(tileSize).ceil().subtract([1, 1]));
},
_noTilesToLoad: function () {