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加载离线地图实例”中,我们需要考虑以下关键步骤: 1. **设置HTML结构**:首先,创建一个HTML文件作为应用的基础,引入OpenLayers库和其他必要的CSS和JavaScript资源。确保OpenLayers库的路径...
在"openlayers5加载天地图.zip"这个压缩包中,我们可以期待找到一个示例项目,展示了如何利用OpenLayers 5来加载和展示天地图的数据。天地图是中国的一个官方基础地理信息服务平台,提供了丰富的地图服务,包括地形...
OpenLayers 是一个强大的开源JavaScript库,用于在Web浏览器中创建交互式的地图应用。它支持多种数据源和图层类型,包括矢量数据。在OpenLayers中,你可以利用`ImageCanvas`策略来动态加载和渲染矢量元素。这种方法...
本示例将详细讲解如何使用OpenLayers来加载并操作天地图。 首先,我们需要理解OpenLayers的基本结构。一个OpenLayers地图应用通常由以下几个主要部分组成:地图容器、投影、图层和控制。地图容器是地图显示的地方,...
瓦片地图是一种常见的地图展示方式,它将大尺寸的地图分割成多个小块(即“瓦片”),每个瓦片都是一个较小的图片,可以根据需要动态加载。这种技术能够提高地图加载速度和用户体验。在OpenLayers中,我们可以通过`...
本文将深入探讨如何使用OpenLayers 4.2加载百度地图和高德地图。 首先,让我们了解一下百度地图API。百度地图是中国领先的在线地图服务提供商,提供了一系列API供开发者使用。在OpenLayers 4.2中集成百度地图,你...
3. **加载百度地图图层**:在OpenLayers 5中创建一个TileLayer实例,并设置其URL为百度地图的瓦片服务地址。这通常是带有缩放级别、经度和纬度参数的动态URL。 4. **视图设置**:设置地图的初始视图,包括中心位置...
OpenLayers3加载谷歌地图,加载谷歌地图显示,实现效果很好,放大比例尺也能看得清楚。文章链接:https://blog.csdn.net/Gary_888/article/details/89914290
这个例子展示了如何使用OpenLayers创建一个简单的地图应用,将本地图片作为背景,并在地图上添加marker标记。你可以根据自己的需求修改这些代码,例如更改图片和标记的URL,或者调整地图的视图和标记的位置。同时,...
我们可以利用百度地图API创建地图对象,然后将其作为图像源(`ol.source.Image`)添加到OpenLayers的图层中: ```javascript var baiduSource = new ol.source.Image({ url: function(extent) { return '...
本教程将详细介绍如何使用OpenLayers加载在线天地图。 一、OpenLayers基础知识 OpenLayers 提供了一套完整的API,用于构建动态地图应用程序。它支持多种地图操作,如缩放、平移、图层控制等。同时,OpenLayers 支持...
5. 加载图层到地图:将瓦片图层添加到地图的图层层组(layers)。 6. 更改URL:由于谷歌地图的API政策,直接使用官方URL可能需要API密钥,所以实际应用时,你可能需要找到一个公开可用的谷歌地图瓦片服务器,或者...
本文将深入探讨如何使用OpenLayers 5加载天地图影像,这是一个中国本土的、提供丰富地理信息的在线地图服务。 首先,了解基本概念。天地图是中国测绘科学研究院开发的地理信息系统,它提供了多种地图服务,包括影像...
在这个例子中,我们可能会看到如何使用OpenLayers加载一个来自GeoServer的地图服务,展示在网页上。通过`ol.Map`对象,我们可以设置地图的基本属性,如中心点、比例尺等。`ol.View`用来控制地图的视图,而`ol.layer....
本文将详细探讨如何使用OpenLayers加载WMS服务,以及这一过程中的关键概念和技术。 ### OpenLayers简介 OpenLayers 提供了一个丰富的API,用于处理各种地图操作,如图层管理、标记添加、图层叠加、地理坐标转换等。...
在实际应用中,你可能还需要处理各种边界情况,比如切片加载错误、地图缩放时的切片预加载策略等。此外,为了更好地管理切片,你可以考虑使用一个服务器端服务来提供切片,例如Tiled Map Service (TMS) 或者...
问题1:openlayers默认地图图层使用的是自带 OSM,如何替换成百度地图。 问题2:换成百度地图之后,坐标偏移问题怎么解决。 问题3:热力图调试过程中如何解决数据渲染闪烁的问题。 解决了上面三个问题,有对应需求的...
离线地图瓦片是一种将大型地图分割成许多小块图片(通常为256x256像素)的方法,这样可以更有效地存储和加载地图,尤其是在低带宽或无网络连接的环境下。 首先,我们需要了解瓦片的坐标系统。OpenLayers和Google ...
在GIS(地理信息系统)领域,OpenLayers是一个广泛使用的开源JavaScript库,用于在Web浏览器中创建交互式的地图应用。本文将详细讲解如何利用OpenLayers加载本地离线地图瓦片,这在没有网络连接或者需要保障地图数据...