Openlayers中使用TileCache作为基础地图图层

muguangzhicheng

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

如下面一个继承自TileCache的类：
/** * 对自定义规则切割的图片进行拼装的类 */ 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存储文件。