一、準(zhǔn)備工作
1、 到OpenLayers的官方網(wǎng)站下載壓縮包,如下圖所示。
2、到水經(jīng)注軟件官方網(wǎng)站下載《水經(jīng)注萬能地圖下載器》或《天地圖衛(wèi)星地圖下載器》均可。
二、下載示例數(shù)據(jù)
這里以《天地圖衛(wèi)星地圖下載器》為你說明如何下載天地圖衛(wèi)星地圖。
軟件下載地址:(http://www.rivermap.cn/)
安裝天地圖衛(wèi)星地圖下載器以后,啟動(dòng)軟件,如下圖所示。
由于只是為了作演示說明如何在OpenLayers中使用離線衛(wèi)星地圖,這里我們只需要框選中國范圍,即點(diǎn)擊工具欄上的“框選下載區(qū)域”,然后在視圖中繪制選擇范圍,如下圖所示。
在范圍中雙擊鼠標(biāo)左鍵,顯示新建任務(wù)對話框,在該對話框中我們只選擇3到7級進(jìn)行下載即可,如下圖所示。
下載完成后,詢問是否導(dǎo)出時(shí)選擇“是”,然后在顯示的“導(dǎo)出圖片數(shù)據(jù)”對話框中選擇導(dǎo)出類型為“瓦片:Google Map”,保存類型為“JPG(*.jpg)”,如下圖所示。
在對話框中點(diǎn)擊“輸出”按鈕,當(dāng)詢問是否疊加標(biāo)簽時(shí),請選擇“是”,則我們下載的中國范圍內(nèi)的天地圖衛(wèi)星地圖數(shù)據(jù)導(dǎo)將出為Google瓦片模式,導(dǎo)出結(jié)果文件夾目錄如下圖所示。
瓦片的命名方式是以全球左上角開始,從左到右,從上到下從0開始記數(shù)的方式命名(即“行號-列號“),因此針對不同級別每個(gè)瓦片行列編號名稱是全球唯一的,不同區(qū)域下載的數(shù)據(jù)可以合同到對應(yīng)的級別。
雙擊下載結(jié)果中的目錄“L04”,可以看到第4級中的瓦片命名方式如下圖所示。
三、地圖引擎配置方法
第一步:將下載的OpenLayers-2.13.1.zip解壓到D盤Test目錄。
第二步:將下載結(jié)果“中國_GoogleMapTiles”目錄復(fù)制到D盤Test目錄并重命名為“data”,如下圖所示。
第三步:將以下代碼復(fù)制并保存為html文件(如“example_TDMTiles.html”),放到“D:\Test\OpenLayers-2.13.1\examples”目錄中。
==============================代碼開始===================================
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" c>
<meta name="viewport" c>
<meta name="apple-mobile-web-app-capable" c>
<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> <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>
代碼.rar (1.7 KB)
==============================代碼結(jié)束===================================
第四步:雙擊打開剛才保存的文件,如果部署正確,則將會(huì)顯示離線衛(wèi)星地圖的瀏覽結(jié)果,如下圖所示。
[attach]321777[/attach]
以上即是在OpenLayers中離線瀏覽天地圖衛(wèi)星地圖的源碼示例,你可以基于此平臺并根據(jù)自己的實(shí)際需求作進(jìn)一步開發(fā)了。
[
本帖最后由 南方姑娘 于 2015-8-26 15:04 編輯 ]