您的位置：首页 > 运维架构

天地图在基于OpenLayers的服务器端进行部署的方法

2014-06-11 15:48 274 查看
一、准备工作

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



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

二、下载示例数据

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

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



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



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



下载完成后，导出ArcGIS Server瓦片，如下图所示。



点击“输出”按钮，开始导出。

等待导出完毕，会在D盘Test目录看到“中国_ArcgisServerTiles”这个文件夹，如下图所示。



然后将“中国_ArcgisServerTiles”文件夹重命名为“data”，如下图所示。



三、服务器端地图引擎配置

第一步：将下载的OpenLayers-2.13.1.zip解压到D盘Test目录。如下图所示。



第二步：新建网站

在IIS中新建网站，如下图所示。



这里我们将网站命名为“TEST”，物理路径设置为“D:\Test”，端口设置为“8080”，如下图所示。



第三步：将以下代码复制并保存为html文件（如“Example_ArcGIS Server.html”），放到“D:\Test\OpenLayers-2.13.1\examples”目录中。

[align=left]==============================代码开始=============================[/align]
[align=left]<!DOCTYPE html>[/align]
[align=left]<html>[/align]
[align=left]<head>[/align]
[align=left] <title>ArcGIS Server Map Cache Example (Direct Access)</title>[/align]
[align=left] <meta http-equiv="Content-Type" content="text/html; charset=utf-8">[/align]
[align=left] <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css">[/align]
[align=left] <link rel="stylesheet" href="style.css" type="text/css">[/align]
[align=left] <script src="../lib/OpenLayers.js"></script>[/align]
[align=left] <script src="../lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script>[/align]
[align=left] <script type="text/javascript">[/align]
[align=left] /* First 4 variables extracted from conf.xml file */[/align]
[align=left][/align]
[align=left] /* Tile layers & map MUST have same projection */[/align]
[align=left] var proj = 'EPSG:4326';[/align]
[align=left][/align]
[align=left][/align]
[align=left] /* Layer can also accept serverResolutions array[/align]
[align=left] * to deal with situation in which layer resolution array & map resolution[/align]
[align=left] * array are out of sync*/[/align]
[align=left] var mapResolutions = [[/align]
[align=left] 1.40625,[/align]
[align=left] 0.703125,[/align]
[align=left] 0.3515625,[/align]
[align=left] 0.17578125,[/align]
[align=left] 0.087890625,[/align]
[align=left] 0.0439453125,[/align]
[align=left] 0.02197265625,[/align]
[align=left] 0.010986328125,[/align]
[align=left] 0.0054931640625,[/align]
[align=left] 0.00274658203125,[/align]
[align=left] 0.001373291015625,[/align]
[align=left] 0.0006866455078125,[/align]
[align=left] 0.00034332275390625,[/align]
[align=left] 0.000171661376953125,[/align]
[align=left] 0.0000858306884765625,[/align]
[align=left] 0.00004291534423828125,[/align]
[align=left] 0.000021457672119140625,[/align]
[align=left] 0.0000107288360595703125,[/align]
[align=left] 0.00000536441802978515625,[/align]
[align=left] 0.000002682209014892578125,[/align]
[align=left] 0.0000013411045074462890625,[/align]
[align=left] 0.00000067055225372314453125[/align]
[align=left] ];[/align]
[align=left][/align]
[align=left] /* For this example this next line is not really needed, 256x256 is default.[/align]
[align=left] * However, you would need to change this if your layer had different tile sizes */[/align]
[align=left] var tileSize = new OpenLayers.Size(256, 256);[/align]
[align=left][/align]
[align=left] /* Tile Origin is required unless it is the same as the implicit map origin[/align]
[align=left] * which can be affected by several variables including maxExtent for map or base layer[/align]
[align=left]*/[/align]
[align=left] var agsTileOrigin = new OpenLayers.LonLat(-180, 90);[/align]
[align=left][/align]
[align=left] /* This can really be any valid bounds that the map would reasonably be within */[/align]
[align=left] /* var mapExtent = new OpenLayers.Bounds[/align]
[align=left](293449.454286,4307691.661132,314827.830376,4323381.484178); */[/align]
[align=left] var mapExtent = new OpenLayers.Bounds(-180, -90, 180, 90);[/align]
[align=left][/align]
[align=left] var aerialsUrl = 'http://localhost:8080/data/_alllayers';[/align]
[align=left][/align]
[align=left] var map;[/align]
[align=left] function init() {[/align]
[align=left] map = new OpenLayers.Map('map', {[/align]
[align=left] maxExtent: mapExtent,[/align]
[align=left] controls: [[/align]
[align=left] new OpenLayers.Control.Navigation(),[/align]
[align=left] new OpenLayers.Control.LayerSwitcher(),[/align]
[align=left] new OpenLayers.Control.PanZoomBar(),[/align]
[align=left] });[/align]
[align=left][/align]
[align=left] var baseLayer = new OpenLayers.Layer.ArcGISCache('Aerials', aerialsUrl, {[/align]
[align=left] tileOrigin: agsTileOrigin,[/align]
[align=left] resolutions: mapResolutions,[/align]
[align=left] sphericalMercator: false,[/align]
[align=left] maxExtent: mapExtent,[/align]
[align=left] useArcGISServer: false,[/align]
[align=left] isBaseLayer: true,[/align]
[align=left] type: 'jpg',[/align]
[align=left] projection: proj[/align]
[align=left] });[/align]
[align=left] map.addLayers([baseLayer]);[/align]
[align=left][/align]
[align=left] //map.zoomToExtent(new OpenLayers.Bounds(295892.34, 4308521.69, 312825.71, 4316988.37));[/align]
[align=left] map.setCenter(new OpenLayers.LonLat(103,31).transform[/align]
[align=left](map.displayProjection, map.getProjectionObject()), 3);[/align]
[align=left] }[/align]
[align=left] </script>[/align]
[align=left]</head>[/align]
[align=left]<body onLoad="init()">[/align]
[align=left] <h1 id="title">[/align]
[align=left] ArcGIS Server Map Cache Example (Direct Access)</h1>[/align]
[align=left] <div id="tags">[/align]
[align=left] </div>[/align]
[align=left] <p id="shortdesc">[/align]
[align=left] Demonstrates the basic initialization of the ArcGIS Cache layer using a prebuilt[/align]
[align=left] configuration, and direct tile access from a file store.[/align]
[align=left] </p>[/align]
[align=left] <div id="map" class="smallmap">[/align]
[align=left] </div>[/align]
[align=left] <div id="docs">[/align]
[align=left] <p>[/align]
[align=left] This example demonstrates using the ArcGISCache layer for accessing ESRI's ArcGIS[/align]
[align=left] Server (AGS) Map Cache tiles directly via the folder structure and HTTP. Toggle[/align]
[align=left] the visibility of the AGS layer to demonstrate how the two maps are lined up[/align]
[align=left]correctly.</p>[/align]
[align=left] <h2>[/align]
[align=left] Notes on this Layer</h2>[/align]
[align=left] <p>[/align]
[align=left] It's important that you set the correct values in your layer, and these values will[/align]
[align=left] differ between tile sets. You can find these values for your layer in conf.xml at[/align]
[align=left] the root of your cache. (ie. <a[/align]
[align=left]href="http://serverx.esri.com/arcgiscache/dgaerials/Layers/conf.xml">[/align] http://serverx.esri.com/arcgisca ... /conf.xml</a>)</p>
[align=left] <p>[/align]
[align=left] For fused map caches this is often[/align]
[align=left]http:<i>ServerName</i>/arcgiscache/<i>MapServiceName</i>/Layers[/align]
[align=left] <br>[/align]
[align=left] For individual layer caches this is often[/align]
[align=left]http:<i>ServerName</i>/arcgiscache/<i>LayerName</i>/Layers[/align]
[align=left] </p>[/align]
[align=left] <h2>[/align]
[align=left] Other Examples[/align]
[align=left] </h2>[/align]
[align=left] <p>[/align]
[align=left] This is one of three examples for this layer. You can also configure this layer[/align]
[align=left] to use <a href="arcgiscache_ags.html">prebuilt tiles from a live server.</a> It[/align]
[align=left] is also possible to let this <a href="arcgiscache_jsonp.html">layer 'auto-configure'[/align]
[align=left] itself using the capabilities json object from the server itself when using a live[/align]
[align=left] ArcGIS server.</a>[/align]
[align=left] </p>[/align]
[align=left] </div>[/align]
[align=left]</body>[/align]
[align=left]</html>[/align]
[align=left]==============================代码结束=============================[/align]
[align=left]第四步：双击打开刚才保存的文件，如果部署正确，则将会显示离线WGS84卫星地图的浏览结果，如下图所示。[/align]



[align=left]当然，你也可以通过以下网址进行访问，效果也是一样的。[/align]
[align=left]http://localhost:8080/OpenLayers-2.13.1/examples/Example_ArcGIS%20Server.html[/align]
[align=left]以上即是如何将天地图基于OpenLayers在服务器端进行部署的全部过程及示例源码，你可以基于此平台并根据自己的实际需求作进一步开发了。[/align]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航