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. JavaSE 学习笔记之多态（七）

    多 态:函数本身就具备多态性,某一种事物有不同的具体的体现. 体现:父类引用或者接口的引用指向了自己的子类对象.//Animal a = new Cat(); 多态的好处:提高了程序的扩展性. 多态的 ...

  2. Linux中安装MongoDB出现的问题记录

    mongoDB安装完成后,运行sudo service mongod start 查看程序状态:ps ajx | grep mongod   ,启动失败 查看失败信息提示,终端命令:tail -f / ...

  3. 一次源码编译PHP折腾记

    前言LINUX环境下编译安装是很折腾人的一件事情,如果没有C/C++功底,碰到编译器报错,肯定要抓狂了 :):),有些软件需要依赖其它库,必须先把依赖库安装好才能进行软件安装.当你学会了编译安装神技之 ...

  4. oracle latch

    (转载 : http://www.dbtan.com/2010/05/latch-free.html) Latch Free(闩锁释放):Latch Free通常被称为闩锁释放,这个名称常常引起误解, ...

  5. Win10中如何把语言栏缩到系统托盘

    Win10中如何把语言栏缩到系统托盘 原来语言栏是在系统托盘中的,右键点击,然后选择“显示语言栏”,就不能缩回去了: 后来在“控制面板\时钟.语言和区域\语言\高级设置”里面,有一个选项: “使用桌面 ...

  6. 4.非关系型数据库（Nosql）之mongodb：普通索引，唯一索引

     一:普通索引 1创建一个新的数据库 > use toto; switched to db toto > show dbs; admin (empty) local 0.078GB & ...

  7. Linux模块化机制和module_init

    致谢: 微信公众号:嵌入式企鹅圈 每天都新增爱好者关注,感谢大家的支持和大牛们的建议. 本人将竭力出品很多其它优质的原创文章回馈大家的厚爱. 引子:模块化机制长处 模块化机制(module)是Linu ...

  8. cocos2d js ClippingNode 制作标题闪亮特效

    1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似 ...

  9. ubuntu下eclipse连接mysql

    提示:一定要保证电脑处于联网状态 我们要下载一个mysql-connector-java-5.0.8-bin.jar的东西(当然这个jar包的版本号和你的mysql版本号的关系不是非常大),放到你新建 ...

  10. codeforces 782B The Meeting Place Cannot Be Changed+hdu 4355+hdu 2438 （三分）

                                                                   B. The Meeting Place Cannot Be Change ...