重写openalyers 的方法，加载天地图瓦片数据
程序员文章站
2022-06-13 07:49:53
...
将TiandituLayer 加载到OpenLayers.js Grid类后。
OpenLayers.Layer.TiandituLayer = OpenLayers.Class(OpenLayers.Layer.Grid,
{
mapType : null,
mirrorUrls : null,
topLevel : null,
bottomLevel : null,
topLevelIndex : 0,
bottomLevelIndex : 20,
topTileFromX : -180,
topTileFromY : 90,
topTileToX : 180,
topTileToY : -270,
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 x_num = this.topTileFromX < this.topTileToX ? Math
.round((bounds.left - this.topTileFromX) / coef) : Math
.round((this.topTileFromX - bounds.right) / coef);
var y_num = this.topTileFromY < this.topTileToY ? Math
.round((bounds.bottom - this.topTileFromY) / coef)
: Math.round((this.topTileFromY - bounds.top) / coef);
var type = this.mapType;
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(x_num, this.mirrorUrls);
}
return this.getFullRequestString({
T : type,
X : x_num,
Y : y_num,
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"
});
测试页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Tiled Map Service Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
function init(){
var extent = new OpenLayers.Bounds(-180.0, -90.0, 180.0, 90.0);
var tempScales = [295497593.05875003,147748796.52937502,73874398.264687508,36937199.132343754,18468599.566171877];
var mapOptions = {
maxExtent: extent
};
var options= {
mapType:"EMap",
topLevel: 3,
bottomLevel: 20
};
map = new OpenLayers.Map("map",mapOptions);
layer = new OpenLayers.Layer.TiandituLayer("qincy", "http://tile0.tianditu.com/DataServer",options);
map.addLayer(layer);
map.addControls([new OpenLayers.Control.MousePosition()]);
map.setCenter(new OpenLayers.LonLat(106,39), 3);
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:1000px;height:500px"></div>
</body>
</html>
补充问题，由于天地图12级别以后，标注与地图分离，所以要修改下geturldaim
加载两个图层一个图层设置成隐藏。
上一篇： 樱桃和车厘子一样吗？哪种营养价值更好？