天地图卫星地图在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>
OpenLayersTiledMapServiceExample
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;
}
-->
TiledMapServiceExample
tile,cache,tms
DemonstratetheinitializationandmodificationofaTiledMapServicelayer.