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

canvas tile layer

Browse Source
This commit is contained in:
Mourner 2011-05-27 19:13:28 +03:00
parent 9863c0c6a0
commit 194edd32a6
5 changed files with 47 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/build.bat
View File

@ -22,6 +22,7 @@ java -jar ../lib/closure-compiler/compiler.jar ^
--js ../src/geo/Projection.js ^
--js ../src/layer/TileLayer.js ^
--js ../src/layer/TileLayer.WMS.js ^
--js ../src/layer/TileLayer.Canvas.js ^
--js ../src/layer/ImageOverlay.js ^
--js ../src/layer/Popup.js ^
--js ../src/layer/marker/Icon.js ^

1
debug/include.js
View File

@ -29,6 +29,7 @@
'layer/TileLayer.js',
'layer/TileLayer.WMS.js',
'layer/TileLayer.Canvas.js',
'layer/ImageOverlay.js',
'layer/Popup.js',

11
dist/leaflet.js vendored
View File

@ -36,12 +36,11 @@ getCenter:function(){return new L.LatLng((this._southWest.lat+this._northEast.la
a=a.getNorthEast()):d=a;return d.lat>=b.lat&&a.lat<=c.lat&&d.lng>=b.lng&&a.lng<=c.lng}});L.Projection={};L.Projection.Mercator={MAX_LATITUDE:function(){var a=Math.exp(2*Math.PI);return Math.asin((a-1)/(a+1))*L.LatLng.RAD_TO_DEG}(),project:function(a){var b=L.LatLng.DEG_TO_RAD,c=L.Projection.Mercator.MAX_LATITUDE,d=a.lng*b,a=Math.max(Math.min(c,a.lat),-c)*b,a=Math.log(Math.tan(Math.PI/4+a/2));return new L.Point(d,a)},unproject:function(a,b){var c=L.LatLng.RAD_TO_DEG;return new L.LatLng((2*Math.atan(Math.exp(a.y))-Math.PI/2)*c,a.x*c,b)}};L.TileLayer=L.Class.extend({includes:L.Mixin.Events,options:{minZoom:0,maxZoom:18,tileSize:256,subdomains:"abc",errorTileUrl:"",attribution:"",opacity:1,unloadInvisibleTiles:L.Browser.mobileWebkit,updateWhenIdle:L.Browser.mobileWebkit},initialize:function(a,b){L.Util.setOptions(this,b);this._url=a;if(typeof this.options.subdomains=="string")this.options.subdomains=this.options.subdomains.split("")},onAdd:function(a){this._map=a;this._initContainer();this._createTileProto();a.on("viewreset",this._reset,
this);if(this.options.updateWhenIdle)a.on("moveend",this._update,this);else this._limitedUpdate=L.Util.limitExecByInterval(this._update,100,this),a.on("move",this._limitedUpdate,this);this._reset();this._update()},onRemove:function(){this._map.getPanes().tilePane.removeChild(this._container);this._map.off("viewreset",this._reset);this.options.updateWhenIdle?this._map.off("moveend",this._update):this._map.off("move",this._limitedUpdate)},getAttribution:function(){return this.options.attribution},_initContainer:function(){var a=
this._map.getPanes().tilePane;if(!this._container||a.empty)this._container=L.DomUtil.create("div","leaflet-layer",a),this.options.opacity<1&&L.DomUtil.setOpacity(this._container,this.options.opacity)},_reset:function(){this._tiles={};this._initContainer();this._container.innerHTML=""},_update:function(){var a=this._map.getPixelBounds(),b=this.options.tileSize,c=new L.Point(Math.floor(a.min.x/b),Math.floor(a.min.y/b)),a=new L.Point(Math.floor(a.max.x/b),Math.floor(a.max.y/b)),c=new L.Bounds(c,a);this._addTilesFromCenterOut(c);
this.options.unloadInvisibleTiles&&this._removeOtherTiles(c)},getTileUrl:function(a,b){return this._url.replace("{s}",this.options.subdomains[(a.x+a.y)%this.options.subdomains.length]).replace("{z}",b).replace("{x}",a.x).replace("{y}",a.y)},_addTilesFromCenterOut:function(a){for(var b=[],c=a.getCenter(),d=a.min.y;d<=a.max.y;d++)for(var e=a.min.x;e<=a.max.x;e++)e+":"+d in this._tiles||b.push(new L.Point(e,d));b.sort(function(a,b){return a.distanceTo(c)-b.distanceTo(c)});this._tilesToLoad=b.length;
a=0;for(d=this._tilesToLoad;a<d;a++)this._addTile(b[a])},_removeOtherTiles:function(a){var b,c,d;for(d in this._tiles)if(this._tiles.hasOwnProperty(d)&&(b=d.split(":"),c=parseInt(b[0],10),b=parseInt(b[1],10),c<a.min.x||c>a.max.x||b<a.min.y||b>a.max.y))this._tiles[d].parentNode==this._container&&this._container.removeChild(this._tiles[d]),delete this._tiles[d]},_addTile:function(a){var b=this._getTilePos(a);zoom=this._map.getZoom();var c=1<<zoom;a.x=(a.x%c+c)%c;a.y<0||a.y>=c||(c=this._createTile(),
L.DomUtil.setPosition(c,b),this._tiles[a.x+":"+a.y]=c,this._loadTile(c,a,zoom),this._container.appendChild(c))},_getTilePos:function(a){var b=this._map.getPixelOrigin();return a.multiplyBy(this.options.tileSize).subtract(b)},_createTileProto:function(){this._tileImg=L.DomUtil.create("img","leaflet-tile");this._tileImg.galleryimg="no";var a=this.options.tileSize;this._tileImg.style.width=a+"px";this._tileImg.style.height=a+"px"},_createTile:function(){var a=this._tileImg.cloneNode(!1);a._leaflet_layer=
this;a.onselectstart=a.onmousemove=L.Util.falseFn;return a},_loadTile:function(a,b,c){a.onload=L.Util.bind(this._tileOnLoad,this);a.onerror=L.Util.bind(this._tileOnError,this);a.src=this.getTileUrl(b,c)},_tileOnLoad:function(a){a=L.DomEvent.getTarget(a);a.className+=" leaflet-tile-loaded";this.fire("tileload",{tile:a,url:a.src});this._tilesToLoad--;this._tilesToLoad||this.fire("load")},_tileOnError:function(a){a=L.DomEvent.getTarget(a);this.fire("tileerror",{tile:a,url:a.src});var b=this.options.errorTileUrl;
if(b)a.src=b}});L.TileLayer.WMS=L.TileLayer.extend({defaultWmsParams:{service:"WMS",request:"GetMap",version:"1.1.1",layers:"",styles:"",format:"image/jpeg",transparent:!1},initialize:function(a,b){this._url=a;this.wmsParams=L.Util.extend({},this.defaultWmsParams);this.wmsParams.width=this.wmsParams.height=this.options.tileSize;for(var c in b)this.options.hasOwnProperty(c)||(this.wmsParams[c]=b[c]);this.wmsParams[parseFloat(this.wmsParams.version)>=1.3?"crs":"srs"]="EPSG:3857";L.Util.setOptions(this,b)},getTileUrl:function(a){var b=
this.options.tileSize,a=a.multiplyBy(b),b=a.add(new L.Point(b,b)),a=this._map.unproject(a),b=this._map.unproject(b),a=L.Projection.Mercator.project(a).multiplyBy(6378137),b=L.Projection.Mercator.project(b).multiplyBy(6378137),b=[a.x,b.y,b.x,a.y].join(",");return this._url+L.Util.getParamString(this.wmsParams)+"&bbox="+b}});L.ImageOverlay=L.Class.extend({includes:L.Mixin.Events,initialize:function(a,b){this._url=a;this._bounds=b},onAdd:function(a){this._map=a;this._image||this._initImage();a.getPanes().overlayPane.appendChild(this._image);a.on("viewreset",this._reset,this);this._reset()},onRemove:function(a){a.getPanes().overlayPane.removeChild(this._image);a.off("viewreset",this._reset,this)},_initImage:function(){this._image=L.DomUtil.create("img","leaflet-image-layer");this._image.style.visibility="hidden";L.Util.extend(this._image,
this.options.unloadInvisibleTiles&&this._removeOtherTiles(c)},_addTilesFromCenterOut:function(a){for(var b=[],c=a.getCenter(),d=a.min.y;d<=a.max.y;d++)for(var e=a.min.x;e<=a.max.x;e++)e+":"+d in this._tiles||b.push(new L.Point(e,d));b.sort(function(a,b){return a.distanceTo(c)-b.distanceTo(c)});this._tilesToLoad=b.length;a=0;for(d=this._tilesToLoad;a<d;a++)this._addTile(b[a])},_removeOtherTiles:function(a){var b,c,d;for(d in this._tiles)if(this._tiles.hasOwnProperty(d)&&(b=d.split(":"),c=parseInt(b[0],
10),b=parseInt(b[1],10),c<a.min.x||c>a.max.x||b<a.min.y||b>a.max.y))this._tiles[d].parentNode==this._container&&this._container.removeChild(this._tiles[d]),delete this._tiles[d]},_addTile:function(a){var b=this._getTilePos(a);zoom=this._map.getZoom();var c=1<<zoom;a.x=(a.x%c+c)%c;a.y<0||a.y>=c||(c=this._createTile(),L.DomUtil.setPosition(c,b),this._tiles[a.x+":"+a.y]=c,this._loadTile(c,a,zoom),this._container.appendChild(c))},_getTilePos:function(a){var b=this._map.getPixelOrigin();return a.multiplyBy(this.options.tileSize).subtract(b)},
getTileUrl:function(a,b){return this._url.replace("{s}",this.options.subdomains[(a.x+a.y)%this.options.subdomains.length]).replace("{z}",b).replace("{x}",a.x).replace("{y}",a.y)},_createTileProto:function(){this._tileImg=L.DomUtil.create("img","leaflet-tile");this._tileImg.galleryimg="no";var a=this.options.tileSize;this._tileImg.style.width=a+"px";this._tileImg.style.height=a+"px"},_createTile:function(){var a=this._tileImg.cloneNode(!1);a.onselectstart=a.onmousemove=L.Util.falseFn;return a},_loadTile:function(a,
b,c){a.onload=L.Util.bind(this._tileOnLoad,this);a.onerror=L.Util.bind(this._tileOnError,this);a.src=this.getTileUrl(b,c)},_tileOnLoad:function(a){a=L.DomEvent.getTarget(a);a.className+=" leaflet-tile-loaded";this.fire("tileload",{tile:a,url:a.src});this._tilesToLoad--;this._tilesToLoad||this.fire("load")},_tileOnError:function(a){a=L.DomEvent.getTarget(a);this.fire("tileerror",{tile:a,url:a.src});var b=this.options.errorTileUrl;if(b)a.src=b}});L.TileLayer.WMS=L.TileLayer.extend({defaultWmsParams:{service:"WMS",request:"GetMap",version:"1.1.1",layers:"",styles:"",format:"image/jpeg",transparent:!1},initialize:function(a,b){this._url=a;this.wmsParams=L.Util.extend({},this.defaultWmsParams);this.wmsParams.width=this.wmsParams.height=this.options.tileSize;for(var c in b)this.options.hasOwnProperty(c)||(this.wmsParams[c]=b[c]);this.wmsParams[parseFloat(this.wmsParams.version)>=1.3?"crs":"srs"]="EPSG:3857";L.Util.setOptions(this,b)},getTileUrl:function(a){var b=
this.options.tileSize,a=a.multiplyBy(b),b=a.add(new L.Point(b,b)),a=this._map.unproject(a),b=this._map.unproject(b),a=L.Projection.Mercator.project(a).multiplyBy(6378137),b=L.Projection.Mercator.project(b).multiplyBy(6378137),b=[a.x,b.y,b.x,a.y].join(",");return this._url+L.Util.getParamString(this.wmsParams)+"&bbox="+b}});L.TileLayer.Canvas=L.TileLayer.extend({initialize:function(a){L.Util.setOptions(this,a)},_createTileProto:function(){this._canvasProto=L.DomUtil.create("canvas","leaflet-tile");var a=this.options.tileSize;this._canvasProto.width=a;this._canvasProto.height=a},_createTile:function(){var a=this._canvasProto.cloneNode(!1);a.onselectstart=a.onmousemove=L.Util.falseFn;return a},_loadTile:function(a,b,c){this.drawTile(a.getContext("2d"),b,c);this._tileOnLoad({target:a})},drawTile:function(){}});L.ImageOverlay=L.Class.extend({includes:L.Mixin.Events,initialize:function(a,b){this._url=a;this._bounds=b},onAdd:function(a){this._map=a;this._image||this._initImage();a.getPanes().overlayPane.appendChild(this._image);a.on("viewreset",this._reset,this);this._reset()},onRemove:function(a){a.getPanes().overlayPane.removeChild(this._image);a.off("viewreset",this._reset,this)},_initImage:function(){this._image=L.DomUtil.create("img","leaflet-image-layer");this._image.style.visibility="hidden";L.Util.extend(this._image,
{galleryimg:"no",onselectstart:L.Util.falseFn,onmousemove:L.Util.falseFn,onload:this._onImageLoad,src:this._url})},_reset:function(){var a=this._map.latLngToLayerPoint(this._bounds.getNorthWest()),b=this._map.latLngToLayerPoint(this._bounds.getSouthEast()).subtract(a);L.DomUtil.setPosition(this._image,a);this._image.style.width=b.x+"px";this._image.style.height=b.y+"px"},_onImageLoad:function(){this.style.visibility=""}});L.Popup=L.Class.extend({includes:L.Mixin.Events,options:{maxWidth:300,autoPan:!0,closeButton:!0,offset:new L.Point(0,2),autoPanPadding:new L.Point(5,5)},initialize:function(a){L.Util.setOptions(this,a)},onAdd:function(a){this._map=a;this._container||this._initLayout();this._updateContent();this._container.style.opacity="0";this._map._panes.popupPane.appendChild(this._container);this._map.on("viewreset",this._updatePosition,this);if(this._map.options.closePopupOnClick)this._map.on("preclick",this._close,
this);this._update();this._container.style.opacity="1";this._opened=!0},onRemove:function(a){a._panes.popupPane.removeChild(this._container);a.off("viewreset",this._updatePosition,this);a.off("click",this._close,this);this._container.style.opacity="0";this._opened=!1},setLatLng:function(a){this._latlng=a;this._opened&&this._update();return this},setContent:function(a){this._content=a;this._opened&&this._update();return this},_close:function(){this._opened&&this._map.removeLayer(this)},_initLayout:function(){this._container=
L.DomUtil.create("div","leaflet-popup");this._closeButton=L.DomUtil.create("a","leaflet-popup-close-button",this._container);this._closeButton.href="#close";this._closeButton.onclick=L.Util.bind(this._onCloseButtonClick,this);this._wrapper=L.DomUtil.create("div","leaflet-popup-content-wrapper",this._container);L.DomEvent.disableClickPropagation(this._wrapper);this._contentNode=L.DomUtil.create("div","leaflet-popup-content",this._wrapper);this._tipContainer=L.DomUtil.create("div","leaflet-popup-tip-container",

29
src/layer/TileLayer.Canvas.js Normal file
View File

@ -0,0 +1,29 @@
L.TileLayer.Canvas = L.TileLayer.extend({
initialize: function(options) {
L.Util.setOptions(this, options);
},
_createTileProto: function() {
this._canvasProto = L.DomUtil.create('canvas', 'leaflet-tile');
var tileSize = this.options.tileSize;
this._canvasProto.width = tileSize;
this._canvasProto.height = tileSize;
},
_createTile: function() {
var tile = this._canvasProto.cloneNode(false);
tile.onselectstart = tile.onmousemove = L.Util.falseFn;
return tile;
},
_loadTile: function(tile, tilePoint, zoom) {
var ctx = tile.getContext('2d');
this.drawTile(ctx, tilePoint, zoom);
this._tileOnLoad({target: tile});
},
drawTile: function(ctx, tilePoint, zoom) {
// override with rendering code
}
});

23
src/layer/TileLayer.js
View File

@ -104,17 +104,6 @@ L.TileLayer = L.Class.extend({
}
},
getTileUrl: function(tilePoint, zoom) {
var subdomains = this.options.subdomains,
s = this.options.subdomains[(tilePoint.x + tilePoint.y) % subdomains.length];
return this._url
.replace('{s}', s)
.replace('{z}', zoom)
.replace('{x}', tilePoint.x)
.replace('{y}', tilePoint.y);
},
_addTilesFromCenterOut: function(bounds) {
var queue = [],
center = bounds.getCenter();
@ -186,6 +175,17 @@ L.TileLayer = L.Class.extend({
// image-specific code (override to implement e.g. Canvas or SVG tile layer)
getTileUrl: function(tilePoint, zoom) {
var subdomains = this.options.subdomains,
s = this.options.subdomains[(tilePoint.x + tilePoint.y) % subdomains.length];
return this._url
.replace('{s}', s)
.replace('{z}', zoom)
.replace('{x}', tilePoint.x)
.replace('{y}', tilePoint.y);
},
_createTileProto: function() {
this._tileImg = L.DomUtil.create('img', 'leaflet-tile');
this._tileImg.galleryimg = 'no';
@ -197,7 +197,6 @@ L.TileLayer = L.Class.extend({
_createTile: function() {
var tile = this._tileImg.cloneNode(false);
tile._leaflet_layer = this;
tile.onselectstart = tile.onmousemove = L.Util.falseFn;
return tile;
},