在這先說點題外話,本人在研究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...