MSCBSC 移動(dòng)通信論壇
搜索
登錄注冊
網(wǎng)絡(luò)優(yōu)化工程師招聘專欄 4G/LTE通信工程師最新職位列表 通信實(shí)習(xí)生/應(yīng)屆生招聘職位

  • 閱讀:2376
  • 回復(fù):2
[經(jīng)驗(yàn)] 天地圖衛(wèi)星地圖在OpenLayers中的應(yīng)用示例源碼
南方姑娘
初級會(huì)員
鎵嬫満鍙風(fēng)爜宸查獙璇? style=


 發(fā)短消息    關(guān)注Ta 

積分 88
帖子 18
威望 2938 個(gè)
禮品券 0 個(gè)
專家指數(shù) -2
注冊 2015-8-14
專業(yè)方向  gis地理信息
回答問題數(shù) 0
回答被采納數(shù) 0
回答采納率 0%
 
發(fā)表于 2015-08-26 14:56:16  只看樓主 

一、準(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解壓到DTest目錄。

第二步:將下載結(jié)果“中國_GoogleMapTiles”目錄復(fù)制到DTest目錄并重命名為“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 編輯 ]
掃碼關(guān)注5G通信官方公眾號,免費(fèi)領(lǐng)取以下5G精品資料
  • 1、回復(fù)“YD5GAI”免費(fèi)領(lǐng)取《中國移動(dòng):5G網(wǎng)絡(luò)AI應(yīng)用典型場景技術(shù)解決方案白皮書
  • 2、回復(fù)“5G6G”免費(fèi)領(lǐng)取《5G_6G毫米波測試技術(shù)白皮書-2022_03-21
  • 3、回復(fù)“YD6G”免費(fèi)領(lǐng)取《中國移動(dòng):6G至簡無線接入網(wǎng)白皮書
  • 4、回復(fù)“LTBPS”免費(fèi)領(lǐng)取《《中國聯(lián)通5G終端白皮書》
  • 5、回復(fù)“ZGDX”免費(fèi)領(lǐng)取《中國電信5G NTN技術(shù)白皮書
  • 6、回復(fù)“TXSB”免費(fèi)領(lǐng)取《通信設(shè)備安裝工程施工工藝圖解
  • 7、回復(fù)“YDSL”免費(fèi)領(lǐng)取《中國移動(dòng)算力并網(wǎng)白皮書
  • 8、回復(fù)“5GX3”免費(fèi)領(lǐng)取《 R16 23501-g60 5G的系統(tǒng)架構(gòu)1
  • 共獲得 1 次點(diǎn)評 我要點(diǎn)評

     
    [充值威望,立即自動(dòng)到帳] [VIP貴賓權(quán)限+威望套餐] 另有大量優(yōu)惠贈(zèng)送活動(dòng),請光臨充值中心
    充值擁有大量的威望和最高的下載權(quán)限,下載站內(nèi)資料無憂
    顯示異常
    論壇元老
    鎵嬫満鍙風(fēng)爜宸查獙璇? style=


     發(fā)短消息    關(guān)注Ta 

    積分 27129
    帖子 5414
    威望 186006 個(gè)
    禮品券 51 個(gè)
    專家指數(shù) 59
    注冊 2015-3-30
    專業(yè)方向  LTE專項(xiàng)高端優(yōu)化
    來自 山東淄博
    回答問題數(shù) 0
    回答被采納數(shù) 0
    回答采納率 0%
     
    發(fā)表于 2015-08-26 15:17:11  QQ
    很實(shí)用,感謝樓主分享

    對本帖內(nèi)容的看法? 我要點(diǎn)評





    活到老學(xué)到老
     
    [立即成為VIP會(huì)員,百萬通信專業(yè)資料立即下載,支付寶、微信付款,簡單、快速!]
    南方姑娘
    初級會(huì)員
    鎵嬫満鍙風(fēng)爜宸查獙璇? style=


     發(fā)短消息    關(guān)注Ta 

    積分 88
    帖子 18
    威望 2938 個(gè)
    禮品券 0 個(gè)
    專家指數(shù) -2
    注冊 2015-8-14
    專業(yè)方向  gis地理信息
    回答問題數(shù) 0
    回答被采納數(shù) 0
    回答采納率 0%
     
    發(fā)表于 2015-08-26 15:43:20  只看樓主 
    感謝你的支持。

    對本帖內(nèi)容的看法? 我要點(diǎn)評

     
    最新通信職位:廣東通信人才網(wǎng) | 北京通信人才網(wǎng) | 上海通信人才網(wǎng) | 南京通信人才網(wǎng) | 西安通信人才網(wǎng) | 重慶通信人才網(wǎng) | 中國通信人才網(wǎng)

    快速回復(fù)主題    
    標(biāo)題 [經(jīng)驗(yàn)] 天地圖衛(wèi)星地圖在OpenLayers中的應(yīng)用示例源碼" tabindex="1">
    內(nèi)容
     上傳資料請點(diǎn)左側(cè)【添加附件】

    當(dāng)前時(shí)區(qū) GMT+8, 現(xiàn)在時(shí)間是 2025-02-02 16:16:13
    渝ICP備11001752號  Copyright @ 2006-2016 mscbsc.com  本站統(tǒng)一服務(wù)郵箱:mscbsc@163.com

    Processed in 0.390126 second(s), 22 queries , Gzip enabled
    TOP
    清除 Cookies - 聯(lián)系我們 - 移動(dòng)通信網(wǎng) - 移動(dòng)通信論壇 - 通信招聘網(wǎng) - Archiver