重写 geturl Openlayers中使用TileCache加载预切割图片作为基础地图图层

Openlayers中使用TileCache加载预切割图片作为基础地图图层

博客分类： OpenLayers

prototype 算法 

Openlayers使用TileCache对象加载预切割的图片。每张图片一张瓦片；其中的getURL（bound）返回的就是我们需要实现的图片地址；所以实现图片地址计算算法在该函数实现；参数bound就是一张图片的坐标边界值。我们需要从这个bound计算图片的顺序数。一般地图图片先按等级zoom存放，每个zoom下面为该zoom下的所有图片，图片过多时还可以按row值分几个文件；如此类推。

如下面一个继承自TileCache的类：

Java代码  

1. /**  
2.  * 对自定义规则切割的图片进行拼装的类  
3.  */  
4. SimpleTileCache=OpenLayers.Class(OpenLayers.Layer.TileCache,{   
5.     initialize:function(name,url,options){   
6.         var tempoptions = OpenLayers.Util.extend(   
7. {'format': 'image/png',isBaseLayer:true},options);                     
8.         OpenLayers.Layer.TileCache.prototype.initialize.apply(this,[name, url, {}, tempoptions]);   
9.         this.extension = this.format.split('/')[1].toLowerCase();   
10.         this.extension = (this.extension == 'jpg') ? 'jpeg' : this.extension;   
11.         this.transitionEffect="resize";   
12.         this.buffer=2;         
13.     },   
14.     /**  
15.      *   按地图引擎切图规则实现的拼接方式  
16.      */  
17.     getURL: function(bounds) {             
18.         var res   = this.map.getResolution();                      
19.         var bbox  = this.map.getMaxExtent();   
20.         var size  = this.tileSize;   
21.         //计算列号                 
22.         var tileX = Math.round((bounds.left - bbox.left) / (res * size.w));   
23.            //计算行号   
24.         var tileY = Math.round((bbox.top-bounds.top) / (res * size.h));    
25.         //当前的等级            
26.         var tileZ = this.map.zoom;                                                         
27.         if(tileX<0) tileX=tileX+Math.round(bbox.getWidth()/bounds.getWidth());          
28.         if(tileY<0)  tileY=tileY+Math.round(bbox.getHeight()/bounds.getHeight());                       
29.         return  this.getTilePic(tileX,tileY,tileZ);   
30.     },   
31.     getTilePic: function(tileX,tileY,tileZ){   
32.         var dir = '';   
33.         if(tileZ > 6) {   
34.             var delta       = Math.pow(2,tileZ-5);         
35.             var rowDir   = 'R'+ Math.floor(tileY /delta);   
36.             var colDir   = 'C'+Math.floor(tileX /delta);   
37.             dir      = tileZ  + "/" + rowDir + "/" + colDir + "/";   
38.         } else {   
39.             dir= tileZ + '/';   
40.         }                      
41.         var tileNo  = tileZ + "-" + tileX + "-" + tileY;   
42.         var sUrl = this.url + dir + tileNo + '.png';   
43.         return sUrl;   
44.     },   
45.     clone: function (obj) {    
46.         if (obj == null) {   
47.         obj = new SimpleTileCache(this.name,this.url,this.options);   
48.         }   
49.         obj = OpenLayers.Layer.TileCache.prototype.clone.apply(this, [obj]);   
50.         return obj;   
51.     },   
52.     CLASS_NAME: "SimpleTileCache"  
53. });  

/**
 * 对自定义规则切割的图片进行拼装的类
 */
SimpleTileCache=OpenLayers.Class(OpenLayers.Layer.TileCache,{
	initialize:function(name,url,options){
		var tempoptions = OpenLayers.Util.extend(
{'format': 'image/png',isBaseLayer:true},options);			        
		OpenLayers.Layer.TileCache.prototype.initialize.apply(this,[name, url, {}, tempoptions]);
		this.extension = this.format.split('/')[1].toLowerCase();
		this.extension = (this.extension == 'jpg') ? 'jpeg' : this.extension;
		this.transitionEffect="resize";
		this.buffer=2;		
	},
	/**
     *   按地图引擎切图规则实现的拼接方式
	 */
	getURL: function(bounds) {		    
		var res   = this.map.getResolution();			        
		var bbox  = this.map.getMaxExtent();
		var size  = this.tileSize;
		//计算列号		        
		var tileX = Math.round((bounds.left - bbox.left) / (res * size.w));
           //计算行号
		var tileY = Math.round((bbox.top-bounds.top) / (res * size.h));	
		//当前的等级			
		var tileZ = this.map.zoom;				        						        
		if(tileX<0) tileX=tileX+Math.round(bbox.getWidth()/bounds.getWidth());       
		if(tileY<0)  tileY=tileY+Math.round(bbox.getHeight()/bounds.getHeight());			        
		return	this.getTilePic(tileX,tileY,tileZ);
	},
	getTilePic: function(tileX,tileY,tileZ){
		var dir = '';
		if(tileZ > 6) {
			var delta       = Math.pow(2,tileZ-5);	    
			var rowDir   = 'R'+ Math.floor(tileY /delta);
			var colDir   = 'C'+Math.floor(tileX /delta);
			dir      = tileZ  + "/" + rowDir + "/" + colDir + "/";
		} else {
			dir= tileZ + '/';
		}				    
		var tileNo  = tileZ + "-" + tileX + "-" + tileY;
		var sUrl = this.url + dir + tileNo + '.png';
		return sUrl;
	},
	clone: function (obj) { 
		if (obj == null) {
		obj = new SimpleTileCache(this.name,this.url,this.options);
		}
		obj = OpenLayers.Layer.TileCache.prototype.clone.apply(this, [obj]);
		return obj;
	},
	CLASS_NAME: "SimpleTileCache"
});

该规测实现的图片地址如下面两种形式：
当zoom>6时：
http://serverUrl.../9/R13/C26/9-418-219.png
当zoom<=6时
http://serverUrl.../4/4-12-9.png
由于到9级时切割的文件过多，再按图片切割的行Rm和列Cn存储文件。