http://blog.csdn.net/gisshixisheng/article/details/44621923

概述：

在前面的章节，讲到了Arcgis for js加载天地图，在本节讲述如何在Openlayers 2.X的版本中加载天地图，并添加自己的wms服务。

效果：

地图

影像

地形

去掉本地wms

实现：

1、天地图服务

在天地图的官方网站上，我们可以看到如下所示的：

页面上列出了我们可调用的图的url，网站地址为：http://www.tianditu.com/guide/index.html。

2、加载天地图

在openlayers中加载天地图可用OpenLayers.Layer.XYZ来实现，在此，我将之封装成了两个函数，getBaseLayer和getAnnoLayer，分别实现基础底图和标注图层，代码如下：

  1. function getBaseLayer(layername, layer){
  2. return new OpenLayers.Layer.XYZ(
  3. layername,
  4. [
  5. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  6. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  7. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  8. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  9. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  10. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  11. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  12. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"
  13. ],
  14. {
  15. isBaseLayer: true,
  16. displayInLayerSwitcher:true
  17. }
  18. );
  19. };
  20. function getAnnoLayer(layername, layer, visiable){
  21. return new OpenLayers.Layer.XYZ(
  22. layername,
  23. [
  24. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  25. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  26. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  27. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  28. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  29. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  30. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  31. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"
  32. ],
  33. {
  34. isBaseLayer: false,
  35. visibility:visiable,
  36. displayInLayerSwitcher:false
  37. }
  38. );
  39. };

调用方式为：

  1. var baseLayers = ["vec_c","img_c","ter_c"];
  2. var vecLayer = getBaseLayer("地图",baseLayers[0]);
  3. var imgLayer = getBaseLayer("影像",baseLayers[1]);
  4. var terLayer = getBaseLayer("地形",baseLayers[2]);
  5. var vecAnno = getAnnoLayer("地图标注", "cva_c", true);

完整代码如下：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    6. <meta name="apple-mobile-web-app-capable" content="yes">
    7. <title>OpenLayers MapQuest Demo</title>
    8. <link rel="stylesheet" type="text/css" href="http://200.200.200.222/OpenLayers-2.12/theme/default/style.css"/>
    9. <style type="text/css">
    10. html, body, #map{
    11. padding:0;
    12. margin:0;
    13. height:100%;
    14. width:100%;
    15. }
    16. </style>
    17. <script type="text/javascript" src="http://200.200.200.222/OpenLayers-2.12/OpenLayers.js"></script>
    18. <script type="text/javascript">
    19. var map;
    20. function init(){
    21. function getBaseLayer(layername, layer){
    22. return new OpenLayers.Layer.XYZ(
    23. layername,
    24. [
    25. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    26. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    27. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    28. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    29. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    30. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    31. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    32. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"
    33. ],
    34. {
    35. isBaseLayer: true,
    36. displayInLayerSwitcher:true
    37. }
    38. );
    39. };
    40. function getAnnoLayer(layername, layer, visiable){
    41. return new OpenLayers.Layer.XYZ(
    42. layername,
    43. [
    44. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    45. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    46. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    47. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    48. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    49. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    50. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    51. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"
    52. ],
    53. {
    54. isBaseLayer: false,
    55. visibility:visiable,
    56. displayInLayerSwitcher:false
    57. }
    58. );
    59. };
    60. var baseLayers = ["vec_c","img_c","ter_c"];
    61. var vecLayer = getBaseLayer("地图",baseLayers[0]);
    62. var imgLayer = getBaseLayer("影像",baseLayers[1]);
    63. var terLayer = getBaseLayer("地形",baseLayers[2]);
    64. var vecAnno = getAnnoLayer("地图标注", "cva_c", true);
    65. map = new OpenLayers.Map({
    66. div: "map",
    67. projection: "EPSG:4326",
    68. layers: [vecLayer,imgLayer,terLayer],
    69. numZoomLevels:20,
    70. center: [103.847, 36.0473],
    71. zoom: 4
    72. });
    73. map.addControl(new OpenLayers.Control.LayerSwitcher());
    74. map.addControl(new OpenLayers.Control.MousePosition());
    75. var wms = new OpenLayers.Layer.WMS(
    76. "省级行政区",
    77. "http://200.200.200.220:8080/geoserver/wms",
    78. {
    79. LAYERS: "pro",
    80. transparent:true
    81. },
    82. {
    83. singleTile: false,
    84. ratio: 1,
    85. isBaseLayer: false,
    86. visibility:true,
    87. yx : {'EPSG:4326' : true}
    88. }
    89. );
    90. map.addLayer(wms);
    91. map.addLayers([vecAnno]);
    92. }
    93. </script>
    94. </head>
    95. <body onload="init()">
    96. <div id="map"></div>
    97. </body>

（转）Openlayers 2.X加载天地图的更多相关文章

  1. 使用openlayers 3 在线加载天地图及GeoServer发布的地图

    使用openlayers3来加载天地图卫星图和标注图层,GeoServer发布地图,一并用openlayers测试加载出来,顺便实现了7种地图控件.下面直接贴代码: <!DOCTYPE html ...

  2. openlayers加载天地图过程中遇到跨域问题

    // 采用openlayers加载天地图 var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ // crossOrigin: 'An ...

  3. （转）Openlayers 2.X加载高德地图

    http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...

  4. 【ArcGis for javascript从零开始】之一 ArcGis加载天地图

    最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.Ar ...

  5. ArcGis Javascript API (V3.6)加载天地图

    Arcgis的Javascript api开发很活跃,不知不觉都发布了3.6的版本了.该版本基于dojo 1.8.3开发的. 从dojo 1.8开始,AMD机制用得越来越多了,而且require([& ...

  6. ArcGIS API for Javascript 加载天地图（经纬度投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. ArcGIS API for Javascript 加载天地图（墨卡托投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 18 ArcGIS API for JavaScript4.X 系列加载天地图（经纬度）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 36ArcGIS API for JavaScript3.X 系列加载天地图（经纬度）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. ansible plugins 列表

    [action plugins] [cache plugins]jsonfilememcachedmemorymongodbpickleredisyaml [callback plugins]acti ...

  2. Android一键换肤功能：一种简单的实现

     Android一键换肤功能:一种简单的实现 现在的APP开发,通常会提供APP的换肤功能,网上流传的换肤代码和实现手段过于复杂,这里有一个开源实现,我找了一大堆,发现这个项目相对较为简洁:htt ...

  3. 刷新PHP缓冲区

    为你的站点加速_php技巧 在当前 PHP 版本的默认配置下,“输出缓冲(Output Buffering)”是被打开的.旧版本则不是这样,在旧版本的 PHP 中,字符串在每次被输出的时候(通过 ec ...

  4. N天学习一个linux命令之kill

    用途 用于终止进程 用法 kill [-s signal|-p] [--] pid... kill -l [signal] 说明 1.默认发送信号15(请求终止进程,程序可以捕获,操作系统会杀死没有对 ...

  5. spring历史背景

    1.2004年spring出现第一版本spring frameworl1.0 2.写代码永远是最简单的,后续的运维工作才是让人感到无助的 3.spring boot在运维方面做了很多工作,部署,监控, ...

  6. （转）linux口令相关文件（/etc/passwd和/etc/shadow）

    在linux中,口令文件在/etc/passwd中,早期的这个文件直接存放加密后的password,前两位是"盐"值,是一个随机数.后面跟的是加密的password.为了安全,如今 ...

  7. VMware Workstation 集群仲裁磁盘和数据共享磁盘的创建

    近期项目须要对SQL Server建立集群服务,多个SQL Server数据库建立集群服务,对外提供唯一的URL訪问地址.当主节点断电.断网后,通过心跳线将消息传递到备用节点.备用节点在3秒内接管数据 ...

  8. 【HDOJ 5419】 Victor and Toys (排列组合)

    [HDOJ 5419] Victor and Toys n个玩具 m个区间 每一个玩具有一个beauty值 问任选三个区间 三区间的MINleft~MAXright的和的期望值 预处理一个数组 存放每 ...

  9. C#实现对数据库的备份还原（完全）

    C#实现对数据库的备份还原 ( 用SQL语句实现对数据库备份还原操作 备份SqlServer数据库: backup database 数据库名 to disk (备份文件存放路径+文件名).bak 还 ...

  10. 针对深度学习（神经网络）的AI框架调研

    针对深度学习(神经网络)的AI框架调研 在我们的AI安全引擎中未来会使用深度学习(神经网络),后续将引入AI芯片,因此重点看了下业界AI芯片厂商和对应芯片的AI框架,包括Intel(MKL CPU). ...