OpenLayers加载QQ地图

经过一段时间的准备，OpenLayers中文官方站(http://www.openlayers.cn)终于和大家见面了。
本站本着分享学习的原则， 为初学者提供交流学习的平台。
同时也希望高手们不吝惜自己的智慧，与大家共同分享自己的经验和代码等
好吧 开始正题。     数据对于GIS来说，是至关重要的，所以首页我们要解决数据的问题
google地图一直在中国不是很稳定，所以要充分利用本土资源了。
加载地图是在不修改源码为原则， 一共分为QQ地图，世纪高通地图，阿里云地图，51地图，搜狗地图，百度地图

下面是第一个  加载QQ地图
大家都知道 QQ地图是属于高德系地图，和google有着同样的偏移量，所以是可以完全重合的，Web墨卡托投影

1. 我们在lib\OpenLayers\Layer目录下面新建一共QQMap.js
我们的目的是取得瓦片数据的url，所以只要找到QQ地图的瓦片url就可以了
新建一共OpenLayers.Layer.QQMap类继承自OpenLayers.Layer.TileCache  ，重新定义getURL方法

具体代码如下

 

 

/**
* 对自定义规则切割的图片进行拼装的类
*/
OpenLayers.Layer.QQMap = OpenLayers.Class(OpenLayers.Layer.TileCache, {
sateTiles:false,
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 = 0;
},
/**
* 按地图引擎切图规则实现的拼接方式
*/
getURL: function (bounds) {
var res = this.map.getResolution();
var bbox = this.map.getMaxExtent();
var size = this.tileSize;
var tileZ = this.map.zoom;
//计算列号 
var tileX = Math.round((bounds.left - bbox.left) / (res * size.w));
//计算行号
var tileY = Math.round((bbox.top - bounds.top) / (res * size.h));
var scope =new Array(0, 0, 0, 0, 0, 3, 0, 3, 0, 3, 0, 3, 0, 7, 0, 7, 0, 15, 0, 15, 0, 31, 0, 31, 0, 63, 4, 59, 0, 127, 12, 115, 0, 225, 28, 227, 356, 455, 150, 259, 720, 899, 320, 469, 1440, 1799, 650, 929, 2880, 3589, 1200, 2069, 5760, 7179, 2550, 3709, 11520, 14349, 5100, 7999, 23060, 28689, 10710, 15429, 46120, 57369, 20290, 29849, 89990, 124729, 41430, 60689, 184228, 229827, 84169, 128886);
var f=tileZ*4;
var i = scope[f++];
var j = scope[f++];
var l = scope[f++];
var scope = scope[f];
var imgformat=this.sateTiles ? ".jpg" : ".png"
if (tileX >= i && tileX <= j && tileY >= l && tileY <= scope) {
tileY = Math.pow(2, tileZ) - 1 - tileY;
var tileNo = tileZ + "/" + Math.floor(tileX / 16) + "/" + Math.floor(tileY / 16)+ "/" + tileX + "_" + tileY + imgformat;
}

var Surl=this.url;
if (OpenLayers.Util.isArray(Surl))
Surl = this.selectUrl(tileNo, Surl);
return Surl+tileNo;
},

clone: function (obj) {
if (obj == null) {
obj = new OpenLayers.Layer.QQMap(this.name, this.url, this.options);
}
obj = OpenLayers.Layer.TileCache.prototype.clone.apply(this, [obj]);
return obj;
},
CLASS_NAME: "OpenLayers.Layer.QQMap"
});

2.  在lib文件夹下的OpenLayers.js 中加载js文件的函数中添加"OpenLayers/Layer/QQMap.js"      注意最后一个是没有“，”的

3.  在地图中加载QQ图层

 

var qq=new OpenLayers.Layer.QQMap("QQ地图",
["http://p0.map.qq.com/maptiles/", "http://p1.map.qq.com/maptiles/", "http://p2.map.qq.com/maptiles/", "http://p3.map.qq.com/maptiles/"], 
layerOptions
);

{sateTiles: false}  就是判断是否加载的卫星图

 

var qqsatellite=new OpenLayers.Layer.QQMap("QQ卫星图",
["http://p0.map.soso.com/sateTiles/", "http://p1.map.soso.com/sateTiles/", "http://p2.map.soso.com/sateTiles/", "http://p3.map.soso.com/sateTiles/"],
{sateTiles: true}
);
var qqsatellitetran=new OpenLayers.Layer.QQMap("QQ卫星图标注",
["http://p0.map.soso.com/sateTranTiles/", "http://p1.map.soso.com/sateTranTiles/", "http://p2.map.soso.com/sateTranTiles/", "http://p3.map.soso.com/sateTranTiles/"],
{isBaseLayer: false}
);

效果如下

更多信息 请关注 OpenLayers中文官方站   http://www.openlayers.cn