您的位置:首页 > 运维架构

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

2013-03-04 20:00 357 查看
(先转载留着备用)

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存储文件。

文章来源:http://icgemu.iteye.com/blog/484824
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐