一、準備工作
1、 到OpenLayers的官方網站下載壓縮包，如下圖所示。
2、到水經注軟件官方網站下載《天地圖衛星地圖下載器》。
二、下載示例數據
這裏以《天地圖衛星地圖下載器》爲你說明如何下載天地圖衛星地圖。
安裝天地圖衛星地圖下載器以後，啓動軟件，如下圖所示。
由於只是爲了作演示說明如何在OpenLayers中使用離線衛星地圖，這裏我們只需要框選中國範圍，即點擊工具欄上的“框選下載區域”，然後在視圖中繪製選擇範圍，如下圖所示。
在範圍中雙擊鼠標左鍵，顯示新建任務對話框，在該對話框中我們只選擇3到7級進行下載即可，如下圖所示。
下載完成後，導出ArcGIS Server瓦片，如下圖所示。
點擊“輸出”按鈕，開始導出。
等待導出完畢，會在D盤Test目錄看到“中國_ArcgisServerTiles”這個文件夾，如下圖所示。
然後將“中國_ArcgisServerTiles”文件夾重命名爲“data”，如下圖所示。
三、服務器端地圖引擎配置
第一步：將下載的OpenLayers-2.13.1.zip解壓到D盤Test目錄。如下圖所示。
第二步：新建網站
在IIS中新建網站，如下圖所示。
這裏我們將網站命名爲“TEST”，物理路徑設置爲“D:\Test”，端口設置爲“8080”，如下圖所示。
第三步：將以下代碼複製並保存爲html文件（如“Example_ArcGIS Server.html”），放到“D:\Test\OpenLayers-2.13.1\examples”目錄中。
==============================代碼開始=============================
<!DOCTYPE html>
<html>
<head>
<title>ArcGIS Server Map Cache Example (Direct Access)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script src="../lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script>
<script type="text/javascript">
/* First 4 variables extracted from conf.xml file */
/* Tile layers & map MUST have same projection */
var proj = 'EPSG:4326';
/* Layer can also accept serverResolutions array
* to deal with situation in which layer resolution array & map resolution
* array are out of sync*/
var mapResolutions = [
1.40625,
0.703125,
0.3515625,
0.17578125,
0.087890625,
0.0439453125,
0.02197265625,
0.010986328125,
0.0054931640625,
0.00274658203125,
0.001373291015625,
0.0006866455078125,
0.00034332275390625,
0.000171661376953125,
0.0000858306884765625,
0.00004291534423828125,
0.000021457672119140625,
0.0000107288360595703125,
0.00000536441802978515625,
0.000002682209014892578125,
0.0000013411045074462890625,
0.00000067055225372314453125
];
/* For this example this next line is not really needed, 256x256 is default.
* However, you would need to change this if your layer had different tile sizes */
var tileSize = new OpenLayers.Size(256, 256);
/* Tile Origin is required unless it is the same as the implicit map origin
* which can be affected by several variables including maxExtent for map or base layer
*/
var agsTileOrigin = new OpenLayers.LonLat(-180, 90);
/* This can really be any valid bounds that the map would reasonably be within */
/* var mapExtent = new OpenLayers.Bounds
(293449.454286,4307691.661132,314827.830376,4323381.484178); */
var mapExtent = new OpenLayers.Bounds(-180, -90, 180, 90);
var aerialsUrl = 'http://localhost:8080/data/_alllayers';
var map;
function init() {
map = new OpenLayers.Map('map', {
maxExtent: mapExtent,
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.PanZoomBar(),
});
var baseLayer = new OpenLayers.Layer.ArcGISCache('Aerials', aerialsUrl, {
tileOrigin: agsTileOrigin,
resolutions: mapResolutions,
sphericalMercator: false,
maxExtent: mapExtent,
useArcGISServer: false,
isBaseLayer: true,
type: 'jpg',
projection: proj
});
map.addLayers([baseLayer]);
//map.zoomToExtent(new OpenLayers.Bounds(295892.34, 4308521.69, 312825.71, 4316988.37));
map.setCenter(new OpenLayers.LonLat(103,31).transform
(map.displayProjection, map.getProjectionObject()), 3);
}
</script>
</head>
<body onLoad="init()">
<h1 id="title">
ArcGIS Server Map Cache Example (Direct Access)</h1>
<div id="tags">
</div>
<p id="shortdesc">
Demonstrates the basic initialization of the ArcGIS Cache layer using a prebuilt
configuration, and direct tile access from a file store.
</p>
<div id="map" class="smallmap">
</div>
<div id="docs">
<p>
This example demonstrates using the ArcGISCache layer for accessing ESRI's ArcGIS
Server (AGS) Map Cache tiles directly via the folder structure and HTTP. Toggle
the visibility of the AGS layer to demonstrate how the two maps are lined up
correctly.</p>
<h2>
Notes on this Layer</h2>
<p>
It's important that you set the correct values in your layer, and these values will
differ between tile sets. You can find these values for your layer in conf.xml at
the root of your cache. (ie. <a
href="http://serverx.esri.com/arcgiscache/dgaerials/Layers/conf.xml">
<p>
For fused map caches this is often
http:<i>ServerName</i>/arcgiscache/<i>MapServiceName</i>/Layers
<br>
For individual layer caches this is often
http:<i>ServerName</i>/arcgiscache/<i>LayerName</i>/Layers
</p>
<h2>
Other Examples
</h2>
<p>
This is one of three examples for this layer. You can also configure this layer
to use <a href="arcgiscache_ags.html">prebuilt tiles from a live server.</a> It
is also possible to let this <a href="arcgiscache_jsonp.html">layer 'auto-configure'
itself using the capabilities json object from the server itself when using a live
ArcGIS server.</a>
</p>
</div>
</body>
</html>
==============================代碼結束=============================
第四步：雙擊打開剛纔保存的文件，如果部署正確，則將會顯示離線WGS84衛星地圖的瀏覽結果，如下圖所示。
當然，你也可以通過以下網址進行訪問，效果也是一樣的。
http://localhost:8080/OpenLayers-2.13.1/examples/Example_ArcGIS%20Server.html
以上即是如何將天地圖基於OpenLayers在服務器端進行部署的全部過程及示例源碼，你可以基於此平臺並根據自己的實際需求作進一步開發了。
