一、準備工作
1、 到OpenLayers的官方網站下載壓縮包，如下圖所示。
2、到水經注軟件官方網站下載《水經注萬能地圖下載器》或《天地圖衛星地圖下載器》均可。
二、下載示例數據
這裏以《天地圖衛星地圖下載器》爲你說明如何下載天地圖衛星地圖。
安裝天地圖衛星地圖下載器以後，啓動軟件，如下圖所示。
由於只是爲了作演示說明如何在OpenLayers中使用離線衛星地圖，這裏我們只需要框選中國範圍，即點擊工具欄上的“框選下載區域”，然後在視圖中繪製選擇範圍，如下圖所示。
在範圍中雙擊鼠標左鍵，顯示新建任務對話框，在該對話框中我們只選擇3到7級進行下載即可，如下圖所示。
下載完成後，詢問是否導出時選擇“是”，然後在顯示的“導出圖片數據”對話框中選擇導出類型爲“瓦片:Google Map”，保存類型爲“JPG(*.jpg)”，如下圖所示。
在對話框中點擊“輸出”按鈕，當詢問是否疊加標籤時，請選擇“是”，則我們下載的中國範圍內的天地圖衛星地圖數據導將出爲Google瓦片模式，導出結果文件夾目錄如下圖所示。
瓦片的命名方式是以全球左上角開始，從左到右，從上到下從0開始記數的方式命名（即“行號-列號“），因此針對不同級別每個瓦片行列編號名稱是全球唯一的，不同區域下載的數據可以合同到對應的級別。
雙擊下載結果中的目錄“L04”，可以看到第4級中的瓦片命名方式如下圖所示。
三、地圖引擎配置方法
第一步：將下載的OpenLayers-2.13.1.zip解壓到D盤Test目錄。
第二步：將下載結果“中國_GoogleMapTiles”目錄複製到D盤Test目錄並重命名爲“data”，如下圖所示。
第三步：將以下代碼複製並保存爲html文件（如“example_TDMTiles.html”），放到“D:\Test\OpenLayers-2.13.1\examples”目錄中。
==============================代碼開始=============================
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Tiled Map Service Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 105;//110;//110;
var lat = 39;//30;//-50;
var zoom = 2;
var map, layer;
function init(){
//map = new OpenLayers.Map( 'map', {maxResolution:1.40625/2} );
map = new OpenLayers.Map("map", {
maxExtent: new OpenLayers.Bounds(-180,-90,180,90),
numZoomLevels:18,
maxResolution:0.3515625,
units:'degree',
projection: "EPSG:4326",
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
layer = new OpenLayers.Layer.TMS("Name", "../../data/",{'type':'jpg', 'getURL':get_my_url });
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.setCenter(new OpenLayers.LonLat(lon, lat).transform(map.displayProjection, map.getProjectionObject()), zoom);
}
function get_my_url (bounds) {
var res = this.map.getResolution();
var x = Math.round ((bounds.left + 180) / (res * this.tileSize.w));
var y = Math.round ((90 - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom() + 3;
z= tlen(1, z);
x= tlen(5, x);
y = tlen(5, y);
var path = "L"+z+"/"+ y + "-" + x + ".jpg";
var url = this.url;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url + path;
}
function tlen(len, mystr){
mystr = String(mystr);
var num = len - mystr.length;
for (var i = 0; i <= num; i++)
{
mystr = "0" + mystr;
}
return mystr;
}
function addTMS() {
l = new OpenLayers.Layer.TMS(
OpenLayers.Util.getElement('layer').value,
OpenLayers.Util.getElement('url').value,
{
'layername': OpenLayers.Util.getElement('layer').value,
'type': OpenLayers.Util.getElement('type').value
});
map.addLayer(l);
map.setBaseLayer(l);
}
</script>
<style type="text/css">
<!--
body,td,th {
font-size: 14px;
}
-->
</style></head>
<body>
<center>
<h1 id="title">Tiled Map Service Example</h1>
<div id="tags">
tile, cache, tms
</div>
<p id="shortdesc">
Demonstrate the initialization and modification of a Tiled Map Service layer.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
URL of TMS (Should end in /): <input type="text" id="url" size="60" value="http://tilecache.osgeo.org/wms-c/Basic.py/" /> layer_name <input type="text" id="layer"
value="basic" /> <select id="type"><option>jpg</option><option>png</option></select> <input type="submit"/><br>
<p>
Example: http://tilecache.osgeo.org/wms-c/Basic.py/, basic, jpg<br>
The first input must be an HTTP URL pointing to a TMS instance. The second
input must be a layer name available from that instance, and the third must
be the output format used by that layer. (Any other behavior will result in
broken images being displayed.)
</p>
</div>
</center>
</body>
</html>
==============================代碼結束=============================
第四步：雙擊打開剛纔保存的文件，如果部署正確，則將會顯示離線衛星地圖的瀏覽結果，如下圖所示。
以上即是在OpenLayers中離線瀏覽天地圖衛星地圖的源碼示例，你可以基於此平臺並根據自己的實際需求作進一步開發了。
