openlayer怎么加载瓦片

发布网友发布时间：2022-05-26 12:24

共1个回答

热心网友时间：2023-10-16 21:36

1、先给个类图简单的介绍下

我们在客户端看到的瓦片其实是一个图片列表也就是上面的grid 类，每张图片都是通过http从后来请求过来的图片也就是方法getURL（bound），
每张图片都有自己的url 也就是他的请求地址，而且grid的列表的每个单元格都有边框也就是bound，那要获取每个单元格中正确的图片都是通过bound来计
算而获取到相应的图片，如想要加载自己瓦片就需要重写grid中的getURL(bound)方法，这也就是最下排6个不同类型的瓦片根据自己的瓦片特点及地图服务
的特点编写的类，如果你有自己的瓦片却跟上面的几种都不相同也不相似，那你可以选择重写grid类，如果你的瓦片操作跟下面的6中服务相同或者类似，那
可以根据自己工作考虑重写那面6个类中的其中某一个中的getURL(bound)的方法。在计算的过程中能涉及到多个参数将在下篇来详细介绍，在这给几个重写
getURL(bound)的例子, 第一个例子是网上的不过在工作中验证过，绝对可用，写的还不错给大家个参考。
1、重写grid类中的getURL(bound)方法加载本地图片(天地图)
[html] view plain copy print?
OpenLayers.Layer.TiandituLayer = OpenLayers.Class(OpenLayers.Layer.Grid,
{

TileType : null,
mirrorUrls : null,
topLevel : null,
bottomLevel : null,
topLevelIndex : 0,
bottomLevelIndex : 20,
topTileFromX : -180,
topTileFromY : 90,
topTileToX : 180,
topTileToY : -90,
isBaseLayer : true,
initialize : function(name, url, options) {

options.topLevel = options.topLevel ? options.topLevel
: this.topLevelIndex;
options.bottomLevel = options.bottomLevel ? options.bottomLevel
: this.bottomLevelIndex;
options.maxResolution = this
.getResolutionForLevel(options.topLevel);
options.minResolution = this
.getResolutionForLevel(options.bottomLevel);
var newArguments = [ name, url, {}, options ];
OpenLayers.Layer.Grid.prototype.initialize.apply(this,
newArguments);
},

clone : function(obj) {

if (obj == null) {
obj = new OpenLayers.Layer.TDTLayer(this.name, this.url,
this.options);
}

obj = OpenLayers.Layer.Grid.prototype.clone
.apply(this, [ obj ]);

return obj;
},

getURL : function(bounds) {
var level = this.getLevelForResolution(this.map.getResolution());
var coef = 360 / Math.pow(2, level);
var Row = this.topTileFromX < this.topTileToX ? Math.round((bounds.left - this.topTileFromX) / coef) : Math.round((this.topTileFromX - bounds.right) / coef);
var Col = this.topTileFromY < this.topTileToY ? Math.round((bounds.bottom - this.topTileFromY) / coef): Math.round((this.topTileFromY - bounds.top) / coef);

var type = this.TileType;
if (type == "EMap") {
if (level >= 2 && level <= 10) {
type = "A0512_EMap";
} else if (level == 11 || level == 12) {
type = "B0627_EMap1112";
} else if (level >= 13 && level <= 18) {
type = "siwei0608";
}
}else if(type=="RMap"){
if (level >= 2 && level <= 7) {
type = "sbsm0210";
} else if (level >= 8 && level <= 10) {
type = "sbsm0210";
} else if (level >= 11 && level <= 14) {
type = "e11";
}else if (level >= 15 && level <= 18) {
type = "sbsm1518";
}
}

var url = this.url;

if (this.mirrorUrls != null) {
url = this.selectUrl(Row, this.mirrorUrls);
}

return this.getFullRequestString({
T : type,
X : Row,
Y : Col,
L : level
}, url);
},
selectUrl : function(a, b) {
return b[a % b.length]
},
getLevelForResolution : function(res) {
var ratio = this.getMaxResolution() / res;
if (ratio < 1)
return 0;
for ( var level = 0; ratio / 2 >= 1;) {
level++;
ratio /= 2;
}
return level;
},
getResolutionForLevel : function(level) {
return 360 / 256 / Math.pow(2, level);
},
getMaxResolution : function() {
return this.getResolutionForLevel(this.topLevelIndex)
},
getMinResolution : function() {
return this.getResolutionForLevel(this.bottomLevelIndex)
},
addTile : function(bounds, position) {
var url = this.getURL(bounds);
return new OpenLayers.Tile.Image(this, position, bounds, url,
this.tileSize);
},

CLASS_NAME : "OpenLayers.Layer.TiandituLayer"
});