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. How do I drop a MongoDB database, from the command line?

    mongo <dbname> --eval "db.dropDatabase()" > use mydb; > db.dropDatabase(); mon ...

  2. linux服务器中不支持soap及bcmul函数的结局方法

    新的程序里用了webserice接口,部到服务器,先是提示:bcmul() 函数不可用,网上搜索一番,得知这是php的高精度函数,需要在编译php的时候加入此模块,于是在编译脚本里增添 “–enabl ...

  3. 【ACM】nyoj_106_背包问题_201308152026

    背包问题时间限制:3000 ms  |  内存限制:65535 KB 难度:3描述 现在有很多物品(它们是可以分割的),我们知道它们每个物品的单位重量的价值v和重量w(1<=v,w<=10 ...

  4. C - 剪花布条

    一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢?  Input输入中含有一些数据,分别是成对出现的花布条和 ...

  5. 洛谷——P2871 [USACO07DEC]手链Charm Bracelet

    https://www.luogu.org/problem/show?pid=2871 题目描述 Bessie has gone to the mall's jewelry store and spi ...

  6. Spring MVC-集成（Integration）-生成PDF示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_pdf.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显示如何 ...

  7. Javascript如何实现继承？

    前言 我这篇文章会误人子弟,我把继承跟构造函数实例化搞混了,汗!要想搞清楚JS的继承机制,看下大牛写的文章:http://www.cnblogs.com/dolphinX/p/3307903.html ...

  8. 用protractor測试canvas绘制(二)

    上一篇写了通过webdriver在浏览器环境下异步调用js代码. 今天进入正题. 事实上有了executeAsyncScript,一切就呼之欲出了. 直接上代码: var compareImage=f ...

  9. Android自己定义组件系列【1】——自己定义View及ViewGroup

    View类是ViewGroup的父类,ViewGroup具有View的全部特性.ViewGroup主要用来充当View的容器.将当中的View作为自己孩子,并对其进行管理.当然孩子也能够是ViewGr ...

  10. CF 557A(Ilya and Diplomas-贪心)

    A. Ilya and Diplomas time limit per test 1 second memory limit per test 256 megabytes input standard ...