[转载]Openlayers中使用TileCache加载预切割图片作为基础地图图层
(先转载留着备用)
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存储文件。