API Docs for:
Show:

File: src/main/resources/js/TilesLayer.js

/**
 * TilesLayer for TiledImage
 * $Id: TilesLayer.js 16 2013-04-13 09:02:12Z nazotoko $
 * Copyright 2013 Shun N. Watanabe <nazotoko (a+) users.sourceforge.net>
 * @module TiledImage
 */

/**
 * @class TilesLayer
 * @constructor
 * @parm name {String} name of the layer
 * @parm url {String} url of the tile image
 * @parm w {Integer} width of the original image
 * @parm h {Integer} height of the original image
 **/
function TilesLayer(name,url,w,h){
    /**
     * @private
     * @property name_
     * @type String
     */
    var name_=name,
    /**
     * @property url_
     * @private
     * @type String
     */
    url_=url,
    /**
     * @private
     * @property maxSize
     * @type Array
     */
    maxSize=[w,h],
    /**
     * @private
     * @property tileSize
     * @type Array
     */
    tileSize=[],
    /**
     * @private
     * @property wrap
     * @type Array
     */
    wrap=[false,false],
    /**
     * @private
     * @property maxZ
     * @type Number
     */
    maxZ=0,
    /**
     * @private
     * @property z_
     * @type Number
     */
    z_=0,
    /**
     * @private
     * @property maxTile
     * @type Array
     */
    maxTile=[1,1],
    /**
     * @private
     * @property parent
     * @type Object
     */
    parent=null,
    /**
     * @private
     * @property layer
     * @type DOMElement
     */
    layer=null,
    /**
     * @private
     * @property tiles
     * @type Object
     */
    tiles={};

    d.mod(this,{
	/**
	 * @public
	 * @method getMaxSize
	 * @required
	 * @return {Array[Number,Number]} original image size
	 */
	getMaxSize:function(){
	    return [maxSize[0],maxSize[1]];
	},
	/**
	 * @public
	 * @method setWrap
	 * @param {Boolean} flag for x direction
	 * @param {Boolean} flag for y direction
	 * @chainable
         * @return {Object} this
	 */
	setWrap:function(x,y){
	    wrap=[x,y];
	    return this;
	},
	/**
	 * @public
	 * @method getWrap
	 * @required
	 * @return {Array[Boolean,Boolean]} wrap flags
	 */
	getWrap:function(){
	    return [wrap[0],wrap[1]];
	},
	/**
	 * @public
	 * @method setName
	 * @chainable
         * @return {Object} this
	 */
	setName:function(name){
	    name_=name;
	    return this;
	},
	/**
	 * @public
	 * @method getName
	 * @required
	 * @return {String} name of the layer.
	 */
	getName:function(){
	    return name_;
	},
	/**
	 * @public
	 * @method setTileSize
	 * @chainable
         * @return {Object} this
	 */
	setTileSize:function(tw,th){
	    tileSize[0]=tw;
	    tileSize[1]=th;
	    var z=0,n=maxSize[0]/tw;
	    if(n<maxSize[1]/th){
		n=maxSize[1]/th;
	    }
	    n=Math.ceil(n);
	    while(n> 1<<z){
		z++;
	    }
	    maxZ=z;
	    return this;
	},
	/**
	 * @public
	 * @method setParent
	 * @required
	 * @param p {Object} object of TiledImage. It's called as parent. 
	 */
	setParent:function (p){
	    parent=p;
	    layer=d.app(p.map,'div',{id:p.target.id+'-layer-'+name_,classname:'map'});
	},
	/**
	 * @public
	 * @method detach
	 * @required
	 */
	detach:function(){
	    parent.map.removeChild(layer);
	    layer=null;
	},
	/**
	 * append tiles of the range.
	 * @public
	 * @method append
	 * @required
	 * @param l {Number} left edge by absolute position
	 * @param t {Number} top edge by absolute position
	 * @param r {Number} right edge by absolute position
	 * @param b {Number} bottom edge by absolute position
	 */
	append:function(l,t,r,b){
	    if(maxZ<z_)return;
	    var w=tileSize,
	      xs=Math.floor(l/w[0]),
	      ys=Math.floor(t/w[1]),
	      xe=r/w[0],
	      ye=b/w[1],x,y,
	      opt={style:{
		    width:w[0]+'px',
		    height:w[1]+'px'
		}},img,v;
	    for(y=ys;y<ye;y++){
		for(x=xs;x<xe;x++){
		    if(!tiles[x+'/'+y]){
			img=d.app(layer,'img',opt);
			d.go(img,[x*w[0],y*w[1]]);
			v=this.posToTile([x,y]);
			if(v){
			    img.src=url_
				.replace('${z}',z_)
				.replace('${x}',v[0])
				.replace('${y}',v[1]);
			    if(v[2]){
				img.style.width=v[2]+'px';
			    }
			    if(v[3]){
				img.style.height=v[3]+'px';
			    }
			}
			tiles[x+'/'+y]=img;
		    }
		}
	    }
	},
	/**
	 * translate tile number to image source.
	 * @method posToTile
	 * @private
	 * @param x array of tile numbers
	 * @return  array of image source and size
	 */
	posToTile:function(x){
	    var maxT,i=2;
	    while(--i>=0){
		maxT=maxTile[i];
		if(wrap[i]){
		    while(x[i]<0){x[i]+=maxT;}
		    x[i]=x[i]%maxT;
		}else {
		    if(x[i]<0){return null;}
		    else if(x[i]>=maxT){return null;}
		}
		if(x[i]==maxT-1){
		    x[i+2]=
			Math.round(maxSize[i]/(1<<(maxZ-z_)))-(maxT-1)*tileSize[i];
		}
	    }
	    return x;
	},
	/**
	 * @public
	 * @method getMaxZ
	 * @required
	 * @return {Number} maximum zoom level
	 */
	getMaxZ:function(){
	    return maxZ;
	},
	/**
	 * set zoom level. This should be called though TiledImage object.
	 * @public
	 * @method setZoom
	 * @required
	 */
	setZoom:function(z){
	    z_=z;
	    if(maxZ<z)return;
	    var i=2;
	    while(--i>=0){
		maxTile[i]=Math.ceil((maxSize[i]/tileSize[i])/(1<<(maxZ-z)));
	    }
	},
	/**
	 * @method removeAll
	 * @public
	 * @required
	 */
	removeAll:function(){
	    d.removeAll(layer);
	    tiles={};
	}
    });
    this.setTileSize(256,256);
}