`
Icgemu
  • 浏览: 71580 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    openlayers加载静态图片地图

    本教程将详细介绍如何使用OpenLayers加载静态图片地图,并探讨其流畅操作、可控显示范围和等级设置。 首先,为了加载静态图片,我们需要准备好图片资源。这些图片通常是一系列按照特定比例尺分块的图像,每一块对应...

    使用openlayers加载离线地图实例

    在“使用openlayers加载离线地图实例”中,我们需要考虑以下关键步骤: 1. **设置HTML结构**:首先,创建一个HTML文件作为应用的基础,引入OpenLayers库和其他必要的CSS和JavaScript资源。确保OpenLayers库的路径...

    openlayers5加载天地图.zip

    在"openlayers5加载天地图.zip"这个压缩包中,我们可以期待找到一个示例项目,展示了如何利用OpenLayers 5来加载和展示天地图的数据。天地图是中国的一个官方基础地理信息服务平台,提供了丰富的地图服务,包括地形...

    openlayers使用imageCanvas加载矢量元素

    OpenLayers 是一个强大的开源JavaScript库,用于在Web浏览器中创建交互式的地图应用。它支持多种数据源和图层类型,包括矢量数据。在OpenLayers中,你可以利用`ImageCanvas`策略来动态加载和渲染矢量元素。这种方法...

    openlayers 加载天地图示例

    本示例将详细讲解如何使用OpenLayers来加载并操作天地图。 首先,我们需要理解OpenLayers的基本结构。一个OpenLayers地图应用通常由以下几个主要部分组成:地图容器、投影、图层和控制。地图容器是地图显示的地方,...

    openlayers加载瓦片地图并手动标记坐标点

    瓦片地图是一种常见的地图展示方式,它将大尺寸的地图分割成多个小块(即“瓦片”),每个瓦片都是一个较小的图片,可以根据需要动态加载。这种技术能够提高地图加载速度和用户体验。在OpenLayers中,我们可以通过`...

    openlayers 4.2 加载百度 高德

    本文将深入探讨如何使用OpenLayers 4.2加载百度地图和高德地图。 首先,让我们了解一下百度地图API。百度地图是中国领先的在线地图服务提供商,提供了一系列API供开发者使用。在OpenLayers 4.2中集成百度地图,你...

    openlayers5加载百度地图.zip

    3. **加载百度地图图层**:在OpenLayers 5中创建一个TileLayer实例,并设置其URL为百度地图的瓦片服务地址。这通常是带有缩放级别、经度和纬度参数的动态URL。 4. **视图设置**:设置地图的初始视图,包括中心位置...

    OpenLayers3加载谷歌地图

    OpenLayers3加载谷歌地图,加载谷歌地图显示,实现效果很好,放大比例尺也能看得清楚。文章链接:https://blog.csdn.net/Gary_888/article/details/89914290

    openlayers实现本地图片作为背景,添加marker标记

    这个例子展示了如何使用OpenLayers创建一个简单的地图应用,将本地图片作为背景,并在地图上添加marker标记。你可以根据自己的需求修改这些代码,例如更改图片和标记的URL,或者调整地图的视图和标记的位置。同时,...

    openlayers 调用百度地图

    我们可以利用百度地图API创建地图对象,然后将其作为图像源(`ol.source.Image`)添加到OpenLayers的图层中: ```javascript var baiduSource = new ol.source.Image({ url: function(extent) { return '...

    openlayers加载在线天地图.zip

    本教程将详细介绍如何使用OpenLayers加载在线天地图。 一、OpenLayers基础知识 OpenLayers 提供了一套完整的API,用于构建动态地图应用程序。它支持多种地图操作,如缩放、平移、图层控制等。同时,OpenLayers 支持...

    openlayers5加载谷歌地图.zip

    5. 加载图层到地图:将瓦片图层添加到地图的图层层组(layers)。 6. 更改URL:由于谷歌地图的API政策,直接使用官方URL可能需要API密钥,所以实际应用时,你可能需要找到一个公开可用的谷歌地图瓦片服务器,或者...

    openlayers5加载天地图影像.zip

    本文将深入探讨如何使用OpenLayers 5加载天地图影像,这是一个中国本土的、提供丰富地理信息的在线地图服务。 首先,了解基本概念。天地图是中国测绘科学研究院开发的地理信息系统,它提供了多种地图服务,包括影像...

    openlayers编辑地图图层并保存到geoserver

    在这个例子中,我们可能会看到如何使用OpenLayers加载一个来自GeoServer的地图服务,展示在网页上。通过`ol.Map`对象,我们可以设置地图的基本属性,如中心点、比例尺等。`ol.View`用来控制地图的视图,而`ol.layer....

    openlayers加载WMS服务

    本文将详细探讨如何使用OpenLayers加载WMS服务,以及这一过程中的关键概念和技术。 ### OpenLayers简介 OpenLayers 提供了一个丰富的API,用于处理各种地图操作,如图层管理、标记添加、图层叠加、地理坐标转换等。...

    openlayers加载本地切片、高亮显示

    在实际应用中,你可能还需要处理各种边界情况,比如切片加载错误、地图缩放时的切片预加载策略等。此外,为了更好地管理切片,你可以考虑使用一个服务器端服务来提供切片,例如Tiled Map Service (TMS) 或者...

    解决openlayers加载百度地图,坐标偏移,热力图渲染闪烁问题

    问题1:openlayers默认地图图层使用的是自带 OSM,如何替换成百度地图。 问题2:换成百度地图之后,坐标偏移问题怎么解决。 问题3:热力图调试过程中如何解决数据渲染闪烁的问题。 解决了上面三个问题,有对应需求的...

    openlayers加载本地离线底图瓦片google数据直接运行即可(亲测)

    离线地图瓦片是一种将大型地图分割成许多小块图片(通常为256x256像素)的方法,这样可以更有效地存储和加载地图,尤其是在低带宽或无网络连接的环境下。 首先,我们需要了解瓦片的坐标系统。OpenLayers和Google ...

    openlayers加载本地离线地图瓦片(重新发2018-10-23)

    在GIS(地理信息系统)领域,OpenLayers是一个广泛使用的开源JavaScript库,用于在Web浏览器中创建交互式的地图应用。本文将详细讲解如何利用OpenLayers加载本地离线地图瓦片,这在没有网络连接或者需要保障地图数据...

Global site tag (gtag.js) - Google Analytics