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加载离线地图实例,可通过mui打包成app。简单,易上手
openlayers 加载天地图示例
openlayers 4.2 加载百度地图(在线 离线) 高德地图(在线 离线)
openlayers使用imageCanvas加载矢量元素
此代码采用开源的openlayers5,显示天地图的注记图层,天地图路网图层,欢迎下载使用。
OpenLayers3加载谷歌地图,加载谷歌地图显示,实现效果很好,放大比例尺也能看得清楚。文章链接:https://blog.csdn.net/Gary_888/article/details/89914290
ol(openlayers)加载天地图/加载中xyz格式瓦片/加载Geoserver发布的WMS图层, 可以一次性加载多个图层: /** * 添加离线图层(数组) * @param {Array} optsArray 选项 * @example * var opts = [{ * url: "ol....
利用openlayers加载geoserver wfs服务发布的矢量图层。
请问在openlayers中如何删除Layer中的marker 3 在层中加了一个标记怎么永久的存到地图上 3 OpenLayers 如何设死地图边界 3 谁写过openlayers解析xml 3 openlayer.popup 3 OpenLayers 怎么做字段标注 4 字段标注不是...
使用openlayers5加载天地图影像,可以供参考使用,希望可以改进代码,重新使用。
openlayers3上加载瓦片图片,可离线运行
iClient for OpenLayers控制图层组显隐方式的实现步骤。 下载后直接运行目录下:example\示例\图层组控制.html(需要修改里面的服务地址url为自己发布的服务信息)
刚刚使用openlayers做了一个简单的小例子,注释很全,很简单,将本地的图片作为背景,能够按照坐标添加任意个标记
提供openlayers加载WMS服务的完整示例
openlayers 调用百度地图
webgis开发,文件里包含用openlayers3加载百度地图、天地图、高德地图、google地图等源代码,很全很实用。
此代码为结合openlayers5和谷歌在线地图,可供初学者参考。谷歌影像图需要更改url即可。
采用openlayers5,在天地图上画直线,此代码可供参考。
此代码采用了最新的openlayers5,引用了在线的百度地图,可供学习者使用参考,欢迎改进开发。