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