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. ubuntu 14.04 gcc/g++版本降低

    Matlab 2014a支持的gcc/g++版本是4.7x,而ubuntu 14.04以及更高版本默认安装的版本都是4.8及以上,因此需要降低gcc/g++版本,方法如下: 1 安装 $ sudo a ...

  2. 开源GIS软件 1

    1. 在线地图浏览器 GMap.NET GMap.NET 是一个强大.免费.跨平台.开源的.NET控件,它在Windows Forms 和WPF环境中能够通过Google, Yahoo!, Bing, ...

  3. HDU 5392 Infoplane in Tina Town

    Infoplane in Tina Town Time Limit: 14000/7000 MS (Java/Others)    Memory Limit: 524288/524288 K (Jav ...

  4. PHP发展的现状和前景

    本人小菜鸟一仅仅,为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识.小菜鸟创建了一个群. 希望光临本博客的人能够进来交流.寻 ...

  5. 尝试create tech team

    自从上一家公司之后,我很少有机会去带一些新人(公司一般都招一些技术独立性的工程师),特别是经验不是特别多的新小伙伴.在如今管理扁平化的公司,我正逐渐搭建自己的小team,并试图让团队成员快速融入并成长 ...

  6. 使用Linq 查询数据 构建对象 select new{}

    linq 查询数据 /// <summary> /// 汽车品牌及车型 /// </summary> /// <returns></returns> p ...

  7. jmeter默认生成测试报告

    我的jmeter安装在F:\study\apache-jmeter-3.1\apache-jmeter-3.1下,在bin目录下执行 其中E:\code\jmeterReport\Course-tes ...

  8. jxl 导入导出Excel（有模板）

    1.导入 @Override public String importBusinessScope(File file, String unit_id) throws Exception { Workb ...

  9. 虚函数的特点就是执行的时候会下降到子类去执行同名覆盖函数 good

    var t: TBitBtn;begin t:=TBitBtn.Create(nil); t.Name:='BitBtn100'; t.parent :=Self; // 这里下断点end; 一路跟踪 ...

  10. 10g异机恢复后EM无法启动故障处理一例

    之前在自己的測试环境上做了个异机恢复,原来的库上是配置过EM的,可是在恢复的库上去启动EM就报错了.以下看详细解决过程: PS:原主机名为zlm,恢复出来的主机名为bak [root@bak ~]# ...