天地圖衛(wèi)星地圖在OpenLayers中的應(yīng)用示例源碼.doc

天地圖衛(wèi)星地圖在OpenLayers中的應(yīng)用示例源碼一、準(zhǔn)備工作1、 到OpenLayers的官方網(wǎng)站下載壓縮包，如下圖所示。2、到水經(jīng)注軟件官方網(wǎng)站下載水經(jīng)注萬(wàn)能地圖下載器或天地圖衛(wèi)星地圖下載器均可。二、下載示例數(shù)據(jù)這里以天地圖衛(wèi)星地圖下載器為你說(shuō)明如何下載天地圖衛(wèi)星地圖。安裝天地圖衛(wèi)星地圖下載器以后，啟動(dòng)軟件，如下圖由于只是為了作演示說(shuō)明如何在OpenLayers中使用離線衛(wèi)星地圖，這里我們只需要框選中國(guó)范圍，即點(diǎn)擊工具欄上的“框選下載區(qū)域”，然后在視圖中繪制選擇范圍，如下圖所示。在范圍中雙擊鼠標(biāo)左鍵，顯示新建任務(wù)對(duì)話框，在該對(duì)話框中我們只選擇3到7級(jí)進(jìn)行下載即可，如下圖所示。下載完成后，詢問(wèn)是否導(dǎo)出時(shí)選擇“是”，然后在顯示的“導(dǎo)出圖片數(shù)據(jù)”對(duì)話框中選擇導(dǎo)出類型為“瓦片:Google Map”，保存類型為“JPG(*.jpg)”，如下圖所示。在對(duì)話框中點(diǎn)擊“輸出”按鈕，當(dāng)詢問(wèn)是否疊加標(biāo)簽時(shí)，請(qǐng)選擇“是”，則我們下載的中國(guó)范圍內(nèi)的天地圖衛(wèi)星地圖數(shù)據(jù)導(dǎo)將出為Google瓦片模式，導(dǎo)出結(jié)果文件夾目錄如下圖所示。瓦片的命名方式是以全球左上角開(kāi)始，從左到右，從上到下從0開(kāi)始記數(shù)的方式命名（即“行號(hào)-列號(hào)“），因此針對(duì)不同級(jí)別每個(gè)瓦片行列編號(hào)名稱是全球唯一的，不同區(qū)域下載的數(shù)據(jù)可以合同到對(duì)應(yīng)的級(jí)別。雙擊下載結(jié)果中的目錄“L04”，可以看到第4級(jí)中的瓦片命名方式如下圖所示。三、地圖引擎配置方法第一步：將下載的OpenLayers-2.13.1.zip解壓到D盤(pán)Test目錄。第二步：將下載結(jié)果“中國(guó)_GoogleMapTiles”目錄復(fù)制到D盤(pán)Test目錄并重命名為“data”，如下圖所示。第三步：將以下代碼復(fù)制并保存為html文件（如“example_TDMTiles.html”），放到“D:TestOpenLayers-2.13.1examples”目錄中。=代碼開(kāi)始= OpenLayers Tiled Map Service Example var lon = 105; var lat = 39; 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); Tiled Map Service Example tile, cache, tms Demonstrate the initialization and modification of a Tiled Map Service layer. URL of TMS (Should end in /): layer_name jpgpng Example: /wms-c/Basic.py/, basic, jpg 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 i