openlayers 載入瓦片詳解 一

2021-09-08 21:59:09 字數 3300 閱讀 8768

在這先說點題外話,本人在研究webgl 三維球過程中驚人發現,openlayers 的開發人員也在研究webgl並經證實他們也正在研發基於

webgl的三維gis開源平台,這可能是首個開源的三維平台,在現在三維大趨勢下,看來 openlayers  前景還是一片大好,閒話少說,靜候佳音。 

在第一篇先給實用的演算法及簡單的引數說明,後面介紹原理,徹底的理解其工作原理。

第一篇 :載入瓦片的演算法類

第二篇 :瓦片製作

第三篇 :瓦片引數確定

第四篇 :openlayers 載入的瓦片投影

第一篇載入瓦片的演算法類

1、先給個類圖簡單的介紹下

我們在客戶端看到的瓦片其實是乙個列表 也就是上面的grid 類  ,每張都是通過http從後來請求過來的也就是方法geturl(bound),

算而獲取到相應的,如想要載入自己瓦片就需要重寫grid中的geturl(bound)方法,這也就是最下排6個不同型別的瓦片根據自己的瓦片特點及地圖服務

可以根據自己工作考慮重寫那面6個類中的其中某乙個中的geturl(bound)的方法。在計算的過程中能涉及到多個引數將在下篇來詳細介紹,在這給幾個重寫

1、重寫grid類中的geturl(bound)方法載入本地(天地圖)

openlayers.layer.tianditulayer = openlayers.class(openlayers.layer.grid,

, options ];

newarguments);

},clone : function(obj)

obj = openlayers.layer.grid.prototype.clone

return obj;

},geturl : function(bounds) else if (level == 11 || level == 12) else if (level >= 13 && level <= 18)

}else if(type=="rmap") else if (level >= 8 && level <= 10) else if (level >= 11 && level <= 14) else if (level >= 15 && level <= 18)

}var url = this.url;

if (this.mirrorurls != null)

return this.getfullrequeststring(, url);

},selecturl : function(a, b) ,

getlevelforresolution : function(res)

return level;

},getresolutionforlevel : function(level) ,

getmaxresolution : function() ,

getminresolution : function() ,

addtile : function(bounds, position) ,

class_name : "openlayers.layer.tianditulayer"

});

測試頁面

2、重寫tilecache類載入本地。

/**

* 對自定義規則切割的進行拼裝的類

* 按地圖引擎切圖規則實現的拼接方式

*/geturl: function(bounds) ,

gettilepic: function(tilex,tiley,tilez) else

var tileno = tilez + "-" + tilex + "-" + tiley;

var surl = this.url + dir + tileno + '.png';

return surl;

}, clone: function (obj)

return obj;

}, class_name: "******tilecache"

});

3、直接修改tilecache類中的geturl方法

修改後 的 tilecache.js

//我用resin 發布的地圖瓦片的位置

url=""+path;

return url

},/*geturl: function(bounds)

url = (url.charat(url.length - 1) == '/') ? url : url + '/'; //url+path

//alert(url+path);

return ""

},*/

class_name: "openlayers.layer.tilecache"

});測試頁面

OpenLayers之載入縮放控制項

1 一般的地圖開啟都有放大 縮小和全圖的導航條,以便於使用者對地圖的檢視,下面我們將在openlayers中實現這一功能 2 在之前建立的空白站點下面新建乙個html的頁面,引入ol.js和ol.css檔案,然後在body標籤中建立乙個div,作為地圖載入的容器 3 實現 4 執行結果 此時我們開啟...

Openlayers 3載入XYZ示例

openlayers3中有個ol.source.xyz類,可以載入tile瓦片圖層,本文只是做個說明,介紹如何識別以及如何正確載入這些圖層。明顯的名稱.png arcserver切片.png 這是arcserver的切片,感覺xyz不明顯,但是組織形式也和xyz是一樣的,其實,稍微想想,除了名字不一...

Openlayers案例7 載入比例尺控制項

lang en charset utf 8 name viewport content width device width,initial scale 1.0 載入比例尺控制項title rel stylesheet href openlayers css ol.css src openlayer...