天地图卫星地图在OpenLayers中的应用示例源码.docx

天地图卫星地图在OpenLayers中的应用示例源码.docx

《天地图卫星地图在OpenLayers中的应用示例源码.docx》由会员分享，可在线阅读，更多相关《天地图卫星地图在OpenLayers中的应用示例源码.docx（11页珍藏版）》请在冰豆网上搜索。

天地图卫星地图在OpenLayers中的应用示例源码

天地图卫星地图在OpenLayers中的应用示例源码

一、准备工作

1、到OpenLayers的官方网站下载压缩包，如下图所示。

2、到水经注软件官方网站下载《水经注万能地图下载器》或《天地图卫星地图下载器》均可。

二、下载示例数据

这里以《天地图卫星地图下载器》为你说明如何下载天地图卫星地图。

安装天地图卫星地图下载器以后，启动软件，如下图

由于只是为了作演示说明如何在OpenLayers中使用离线卫星地图，这里我们只需要框选中国范围，即点击工具栏上的“框选下载区域”，然后在视图中绘制选择范围，如下图所示。

在范围中双击鼠标左键，显示新建任务对话框，在该对话框中我们只选择3到7级进行下载即可，如下图所示。

下载完成后，询问是否导出时选择“是”，然后在显示的“导出图片数据”对话框中选择导出类型为“瓦片:

GoogleMap”，保存类型为“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”目录中。

==============================代码开始=============================

DOCTYPEhtml>

varlon=105;

varlat=39;

varzoom=2;

varmap,layer;

functioninit（）{

//map=newOpenLayers.Map（'map',{maxResolution:

1.40625/2}）;

map=newOpenLayers.Map（"map",{

maxExtent:

newOpenLayers.Bounds（-180,-90,180,90）,

numZoomLevels:

18,

maxResolution:

0.3515625,

units:

'degree',

projection:

"EPSG:

4326",

displayProjection:

newOpenLayers.Projection（"EPSG:

4326"）

}）;

layer=newOpenLayers.Layer.TMS（"Name","../../data/",{'type':

'jpg','getURL':

get_my_url}）;

map.addLayer（layer）;

map.addControl（newOpenLayers.Control.LayerSwitcher（））;

map.addControl（newOpenLayers.Control.MousePosition（））;

map.setCenter（newOpenLayers.LonLat（lon,lat）.transform（map.displayProjection,map.getProjectionObject（））,zoom）;

}

functionget_my_url（bounds）{

varres=this.map.getResolution（）;

varx=Math.round（（bounds.left+180）/（res*this.tileSize.w））;

vary=Math.round（（90-bounds.top）/（res*this.tileSize.h））;

varz=this.map.getZoom（）+3;

z=tlen（1,z）;

x=tlen（5,x）;

y=tlen（5,y）;

varpath="L"+z+"/"+y+"-"+x+".jpg";

varurl=this.url;

if（urlinstanceofArray）{

url=this.selectUrl（path,url）;

}

returnurl+path;

}

functiontlen（len,mystr）{

mystr=String（mystr）;

varnum=len-mystr.length;

for（vari=0;i<=num;i++）

{

mystr="0"+mystr;

}

returnmystr;

}

functionaddTMS（）{

l=newOpenLayers.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）;

}

--

body,td,th{

font-size:

14px;

}

-->