生活随笔
收集整理的這篇文章主要介紹了
OpenLayers加载搜狗地图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
從目前國內的地圖服務商提供的地圖來看,地圖瓦片切圖規則只少分為三種。其中Google Map、Bing地圖、MapABC、QQ地圖是一類,而百度地圖、搜狗地圖是使用的另一類,他們是在GCJ02 基礎上又進行了自己的偏移 ,還有一類應該是mapbar的地圖(還沒有仔細去分析它的瓦片編號規則)。
經過分析 搜狗地圖瓦片編號是以0,0開始編號,向東X正增加,向西X負增加,向北Y增加,向南Y負增加,而谷歌地圖是從左上角開始編號,向東X增加,向南Y增加,這種計算很方便。
知道了這種對應規則后,我們就可以得到計算的方式,代碼如下:
其實還是重寫getURL
1. 我們在lib\OpenLayers\Layer目錄下面新建一共SoGou.js
我們的目的是取得瓦片數據的url,所以只要找到搜狗地圖的瓦片url就可以了
新建一共OpenLayers.Layer.SoGou類繼承自OpenLayers.Layer.TileCache??,重新定義getURL方法
/**
* 對自定義規則切割的圖片進行拼裝的類
*/
OpenLayers.Layer.SoGou =
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 =
0;},/*** 按地圖引擎切圖規則實現的拼接方式*/getURL: function (bounds) {var tilez=
this.map.zoom-
1;var offsetX = Math.pow(
2,tilez); var offsetY = offsetX -
1; var res =
this.map.getResolution();var bbox =
this.map.getMaxExtent();var size =
this.tileSize;var bx = Math.round((bounds.left - bbox.left) / (res *
size.w));var by = Math.round((bbox.top - bounds.top) / (res *
size.h));var numX = bx -
offsetX; var numY = (-by) +
offsetY; tilez = tilez +
1; var zoomLevel =
729 -
tilez;if (zoomLevel ==
710) zoomLevel =
792;var blo = Math.floor(numX /
200); var bla = Math.floor(numY /
200); var blos,blas; if (blo <
0) blos =
"M" + ( -
blo); else blos =
"" +
blo; if (bla <
0) blas =
"M" + ( -
bla); else blas =
"" +
bla; var x = numX.toString().replace(
"-",
"M"); var y = numY.toString().replace(
"-",
"M"); var urlsNum = parseInt((bx + by) %
this.url.length); var strURL =
""; strURL =
this.url[urlsNum] + zoomLevel +
"/" + blos +
"/" + blas +
"/" + x +
"_" + y +
".GIF";return strURL;},clone: function (obj) {if (obj ==
null) {obj =
new OpenLayers.Layer.SoGou(
this.name,
this.url,
this.options);}obj = OpenLayers.Layer.TileCache.prototype.clone.apply(
this, [obj]);return obj;},CLASS_NAME: "OpenLayers.Layer.SoGou"
}); 請求的切片地址
?
var soGou=new OpenLayers.Layer.SoGou("SoGou地圖",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [ "http://p0.go2map.com/seamless1/0/174/",??"http://p1.go2map.com/seamless1/0/174/",? ? "http://p2.go2map.com/seamless1/0/174/", "http://p3.go2map.com/seamless1/0/174/"],
? ?? ?? ?? ?? ? layerOptions
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? );
?
?
更多精彩內容 訪問OpenLayers中文官方站
(http://www.openlayers.cn)
轉載于:https://www.cnblogs.com/gisvip/archive/2012/11/05/2755849.html
總結
以上是生活随笔為你收集整理的OpenLayers加载搜狗地图的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。