• [转载]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存储文件。

    文章来源:http://icgemu.iteye.com/blog/484824

  • 相关阅读:
    计算JensenShannon Divergence距离的方法
    perl 取出正则表达式的匹配位置
    QQ客服左右提示
    JS获取DropDownList的value值与text值
    一个大文件上传组件RadUpLoad(带进度条时间显示)
    asp.net不同后辍名的文件
    RowDataBound事件 .
    当sql2000和sql2005同时装时,因为都用了1433的端口号,可能会导致连接失败,这里讲asp.net 的连接方法 .
    CSS圆角
    ASP.NET把图片存入数据库和使用文件流读取显示(转)
  • 原文地址:https://www.cnblogs.com/ganb/p/2943313.html
Copyright © 2020-2023  润新知